- var page_Title = 'Social App';
- var accordion             = true;
- var theme_customizer      = true;
- var photo_swipe           = true;
- var sidebar               = true;
- var slick                 = true;
- var counter               = true;
- var tooltip               = true;
- var avatar_change         = true;
- var header_slider         = true;
- var scrollbar             = true;
- var counter               = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Social App
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Apps
                    li.breadcrumb-item.active Social App
          // Container-fluid starts
          .container.social-app-profile1
            .user-profile.social-app-profile.tabs
              .grid.grid-cols-12.card-gap
                // user profile first-style start
                div(class="col-span-12 box-col-12")
                  .card.hovercard.text-center.common-user-image
                    .cardheader
                      .user-image
                        .avatar
                          .common-align
                            div
                              img#output(src='../assets/images/dashboard-11/user/7.jpg' alt='Profile Image')
                              input(type='file' accept='image/*' onchange='loadFile(event)')
                              .icon-wrapper#cancelButton
                                i.icofont.icofont-error
                              .icon-wrapper
                                i.icofont.icofont-pencil-alt-5
                          ul.share-icons
                            li
                              a(href='#!').social-icon.bg-primary
                                i.fa-regular.fa-face-smile.fa-flip
                            li
                              a(href='#!').social-icon.bg-secondary
                                i.fa-brands.fa-weixin.fa-flip
                            li
                              a(href='#!').social-icon.bg-warning
                                i.fa-solid.fa-share-nodes.fa-flip
                    .info.market-tabs
                      ul.nav.tab-links.border-tab.tabs-social
                        li
                          a.tab-link.active(data-tabfilter="1")
                            | Timeline
                        li
                          a.tab-link(data-tabfilter="2")
                            | About
                        li
                          .user-designation
                          .title
                            a(target='_blank', href='') ElANA
                          .desc.mt-2 general manager
                        li
                          a.tab-link(data-tabfilter="3")
                            | Friends
                        li
                          a.tab-link(data-tabfilter="4")
                            | Photos
              .tab-content
                .tab-pan.fade.show.active(data-tabcontent="1")
                  .grid.grid-cols-12.card-gap
                    div(class="col-span-3 xl:col-span-6 lg:col-span-5 md:col-span-12 xl-40 box-col-4")
                      #accordionExample.default-according.style-1.faq-accordion.accordion
                        .card.accordion-item
                          #headingOne.card-header.accordion-header
                            h2.accordion-button.collapsed.mb-0
                              button.btn.btn-link.btn-block.text-start(type='button' data-bs-toggle='collapse' data-bs-target='#collapseOne' aria-expanded='true' aria-controls='collapseOne')
                                | My Profile
                          #collapseOne.accordion-collapse.collapse.show(aria-labelledby='headingOne' data-bs-parent='#accordionExample')
                            .card-body.accordion-body.socialprofile.filter-cards-view
                              .flex.page-notification
                                img.img-50.max-w-full.h-auto.m-r-20.rounded-full(src='../assets/images/dashboard-11/user/7.jpg', alt='')
                                .grow
                                  h6.font-primary.pb-1 My Page
                                  span.block
                                    span
                                      i.fa-regular.fa-comments  
                                      span.px-2 Messages
                                        span.badge.rounded-full.badge-light.ms-2 4
                                  span.block
                                    span
                                      i.fa-regular.fa-bell  
                                      span.px-2 Notification
                                        span.badge.rounded-full.badge-light.ms-2 6
                              .social-btngroup.flex
                                button.btn.btn-primary.text-center.text-white(type='button') Likes
                                button.btn.btn-light.text-center.ms-2(type='button') View
                              .likes-profile.text-center
                                h5 
                                  span.counter(data-target='890')
                                    i.fa-solid.fa-heart.font-danger
                                    |  0
                              div.text-center
                                | 35 New Likes This Week
                              .customers.text-center.social-group
                                ul.flex.justify-center
                                  li.d-inline-block
                                    img.img-40.rounded-full(src='../assets/images/user/3.jpg', alt=''
                                    data-container='body', data-bs-toggle='tooltip', title='Johny Waston')
                                  li.d-inline-block
                                    img.img-40.rounded-full(src='../assets/images/user/5.jpg', alt=''
                                    data-container='body', data-bs-toggle='tooltip', title='Andew Jon')
                                  li.d-inline-block
                                    img.img-40.rounded-full(src='../assets/images/user/1.jpg', alt=''
                                    data-container='body', data-bs-toggle='tooltip', title='Comeren Diaz')
                                  li.d-inline-block
                                    img.img-40.rounded-full(src='../assets/images/user/2.png', alt=''
                                    data-container='body', data-bs-toggle='tooltip', title='Bucky Barnes')
                                  li.d-inline-block
                                    img.img-40.rounded-full(src='../assets/images/user/8.jpg', alt=''
                                    data-container='body', data-bs-toggle='tooltip', title='Jason Borne')
                                  li.d-inline-block
                                    img.img-40.rounded-full(src='../assets/images/user/11.png', alt='' data-container='body', data-bs-toggle='tooltip', title='Comeren Diaz')
                              img.max-w-full.mt-xl-5.mt-4.w-full(alt='', src='../assets/images/social-app/timeline-3.png')
                        .card.accordion-item.mutual-friends
                          #headingTwo.card-header.accordion-header
                            h2.accordion-button.collapsed.mb-0
                              button.btn.btn-link.btn-block.text-start.collapsed(type='button' data-bs-toggle='collapse' data-bs-target='#collapseTwo' aria-expanded='true' aria-controls='collapseTwo')
                                | Mutual Friends
                          #collapseTwo.accordion-collapse.collapse.show(aria-labelledby='headingTwo' data-bs-parent='#accordionExample')
                            .card-body.accordion-body.social-status.filter-cards-view
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/2.png', alt='')
                                .social-status.social-online
                                .grow
                                  span.font-medium.block Bucky Barnes
                                  span.block.fw-normal winter@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/10.jpg', alt='')
                                .social-status.social-busy
                                .grow
                                  span.font-medium.block Sarah Loren
                                  span.block.fw-normal barnes@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/6.jpg', alt='')
                                .social-status.social-offline
                                .grow
                                  span.font-medium.block Jason Borne
                                  span.block.fw-normal jasonb@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/8.jpg', alt='')
                                .social-status.social-offline
                                .grow
                                  span.font-medium.block Comeren Diaz
                                  span.block.fw-normal comere@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/14.png', alt='')
                                .social-status.social-online
                                .grow
                                  span.font-medium.block Andew Jon
                                  span.block.fw-normal andrewj@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/4.jpg', alt='')
                                .social-status.social-busy
                                .grow
                                  span.font-medium.block Johny Waston
                                  span.block.fw-normal johny@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/3.png', alt='')
                                .social-status.social-offline
                                .grow
                                  span.font-medium.block Johny William
                                  span.block.fw-normal johnyw@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/2.png', alt='')
                                .social-status.social-online
                                .grow
                                  span.font-medium.block Bucky Barnes
                                  span.block.fw-normal winter@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/10.jpg', alt='')
                                .social-status.social-busy
                                .grow
                                  span.font-medium.block Sarah Loren
                                  span.block.fw-normal barnes@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/6.jpg', alt='')
                                .social-status.social-offline
                                .grow
                                  span.font-medium.block Jason Borne
                                  span.block.fw-normal jasonb@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/8.jpg', alt='')
                                .social-status.social-offline
                                .grow
                                  span.font-medium.block Comeren Diaz
                                  span.block.fw-normal comere@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/14.png', alt='')
                                .social-status.social-online
                                .grow
                                  span.font-medium.block Andew Jon
                                  span.block.fw-normal andrewj@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/4.jpg', alt='')
                                .social-status.social-busy
                                .grow
                                  span.font-medium.block Johny Waston
                                  span.block.fw-normal johny@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/3.png', alt='')
                                .social-status.social-offline
                                .grow
                                  span.font-medium.block Johny William
                                  span.block.fw-normal johnyw@gmail.com
                        .card.accordion-item
                          #headingThree.card-header.accordion-header
                            h2.accordion-button.collapsed.mb-0
                              button.btn.btn-link.btn-block.text-start.collapsed(type='button' data-bs-toggle='collapse' data-bs-target='#collapseThree' aria-expanded='true' aria-controls='collapseThree')
                                | Activity Feed
                          #collapseThree.accordion-collapse.collapse.show(aria-labelledby='headingThree' data-bs-parent='#accordionExample')
                            .card-body.accordion-body.social-status.filter-cards-view
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/10.jpg', alt='')
                                .grow
                                  span.font-medium.block Andew Jon
                                  p Commented on Aliya Steele's 
                                    a(href='#!') Photo
                                  span.light-span.fw-normal 20 min ago
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/3.jpg', alt='')
                                .grow
                                  span.font-medium.block Johny Waston
                                  p Commented on Max Burton's 
                                    a(href='#!') Photo
                                  span.light-span.fw-normal 1 hour ago
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/5.jpg', alt='')
                                .grow
                                  span.font-medium.block Comeren Diaz
                                  p Commented on Dalary Ayala's 
                                    a(href='#!') Photo
                                  span.light-span.fw-normal 1 days ago
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/4.jpg', alt='')
                                .grow
                                  span.font-medium.block Sarah Loren
                                  p Commented on Clark Byrd's  
                                    a(href='#!') Photo
                                  span.light-span.fw-normal 2 days ago
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/3.jpg', alt='')
                                .grow
                                  span.font-medium.block Johny Waston
                                  p Commented on Colby Olson's 
                                    a(href='#!') Photo
                                  span.light-span.fw-normal 5 days ago
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/5.jpg', alt='')
                                .grow
                                  span.font-medium.block Comeren Diaz
                                  p Commented on Sonny Case's  
                                    a(href='#!') Photo
                                  span.light-span.fw-normal 6 days ago
                    div(class="col-span-6 xl:col-span-6 lg:col-span-7 md:col-span-12 xl-80 box-col-8e")
                      .grid.grid-cols-12
                        div(class="col-span-12")
                          .card
                            .card-body
                              .new-users-social
                                .flex
                                  img.rounded-full.image-radius.m-r-15(src='../assets/images/user/1.jpg', alt='')
                                  .grow
                                    h6 ELANA
                                    p.c-o-light January, 12,2025
                                  span.pull-right.mt-0
                                    i(data-feather='more-vertical')
                              img.max-w-full(alt='', src='../assets/images/social-app/timeline-1.png')
                              .timeline-content
                                p
                                  | She is a certified personal trainer and nutritionist who uses her blog as a place to share cooking ideas, training photos, and inspirational messages for other fitness fans.
                                div.like-content
                                  span
                                    i.fa-solid.fa-heart.font-danger
                                  span.pull-right.comment-number
                                    span 20 
                                    span
                                      i.fa-solid.fa-share-nodes
                                  span.pull-right.comment-number
                                    span 10 
                                    span
                                      i.fa-regular.fa-comments
                                .social-chat
                                  .your-msg
                                    .flex
                                      img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/1.jpg')
                                      .grow
                                        span.font-medium Jason Borne 
                                          span 1 Year ago 
                                            i.fa-solid.fa-reply.font-primary
                                        p we are working for the dance and sing songs. this car is very awesome for the youngster. please vote this car and like our post
                                  .other-msg
                                    .flex
                                      img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/2.png')
                                      .grow
                                        span.font-medium Alexendra Dhadio 
                                          span 1 Month ago 
                                            i.fa-solid.fa-reply.font-primary
                                        p yes, really very awesome car i see the features of this car in the official website of #Mercedes-Benz and really impressed :-)
                                  .other-msg
                                    .flex
                                      img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/3.png')
                                      .grow
                                        span.font-medium Olivia Jon 
                                          span 15 Days ago 
                                            i.fa-solid.fa-reply.font-primary
                                        p i like lexus cars, lexus cars are most beautiful with the awesome features, but this car is really outstanding than lexus
                                  .your-msg
                                    .flex
                                      img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/1.jpg')
                                      .grow
                                        span.font-medium Issa Bell 
                                          span 1 Year ago 
                                            i.fa-solid.fa-reply.font-primary
                                        p we are working for the dance and sing songs. this car is very awesome for the youngster. please vote this car and like our post
                                  .text-center
                                    a(href='#!') More Comments
                                .comments-box
                                  .flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/1.jpg')
                                    .grow
                                      .input-group.text-box(class="!flex-nowrap")
                                        input.form-control.input-txt-bx(type='text', name='message-to-send', placeholder='Post your comments')
                                        .input-group-append
                                          button.btn.btn-transparent(type='button')
                                            i.fa-regular.fa-face-smile   
                        div(class="col-span-12")
                          .card
                            .card-body
                              .new-users-social
                                .flex
                                  img.rounded-full.image-radius.m-r-15(src='../assets/images/user/1.jpg', alt='')
                                  .grow
                                    h6.mb-0.font-bold ELANA
                                    p.c-o-light January, 12,2019
                                  span.pull-right.mt-0
                                    i(data-feather='more-vertical')
                              img.max-w-full(alt='', src='../assets/images/social-app/timeline-2.png')
                              .timeline-content
                                p
                                  | we are working for the dance and sing songs. this car is very awesome for the youngster. please vote this car and like our post
                                div.like-content
                                  span
                                    i.fa-solid.fa-heart.font-danger
                                  span.pull-right.comment-number
                                    span 20 
                                    span
                                      i.fa-solid.fa-share-nodes
                                  span.pull-right.comment-number
                                    span 10 
                                    span
                                      i.fa-regular.fa-comments
                                .social-chat
                                  .your-msg
                                    .flex
                                      img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/1.jpg')
                                      .grow
                                        span.font-medium Jason Borne 
                                          span 1 Year ago 
                                            i.fa-solid.fa-reply.font-primary
                                        p we are working for the dance and sing songs. this car is very awesome for the youngster. please vote this car and like our post
                                  .your-msg
                                    .flex
                                      img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/1.jpg')
                                      .grow
                                        span.font-medium Issa Bell 
                                          span 1 Year ago 
                                            i.fa-solid.fa-reply.font-primary
                                        p we are working for the dance and sing songs. this car is very awesome for the youngster. please vote this car and like our post
                                  .text-center
                                    a(href='#!') More Comments
                                .comments-box
                                  .flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/1.jpg')
                                    .grow
                                      .input-group.text-box(class="!flex-nowrap")
                                        input.form-control.input-txt-bx(type='text', name='message-to-send', placeholder='Post your comments')
                                        .input-group-append
                                          button.btn.btn-transparent(type='button')
                                            i.fa-regular.fa-face-smile   
                    div(class="col-span-3 xl:col-span-12 xl-100 box-col-12")
                      #accordionoc1.default-according.style-1.faq-accordion.job-accordion.accordion
                        .grid.grid-cols-12.card-gap
                          div(class="col-span-12 xl:col-span-6 lg:col-span-12 xl-50 box-col-6 order-xxl-i [@media(min-width:320px)_and_(max-width:1660px)]:order-[1]")
                            .card.accordion-item
                              .card-header.accordion-header
                                h5.accordion-button.collapsed.mb-0
                                  button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseicon2', aria-expanded='true', aria-controls='collapseicon2')
                                    | Profile Intro
                              #collapseicon2.accordion-collapse.collapse.show(aria-labelledby='collapseicon2', data-bs-parent='#accordion')
                                .card-body.accordion-body.filter-cards-view
                                  span.mb-2.block About Me :
                                  p  
                                    | Hi, I’m elana, I’m 30 and I work as a 
                                    | web designer for the “Daydreams” 
                                    | Agency in pier 56.
                                  span.mb-2.block Favorite TV Shows :
                                  p  
                                    | Breaking Good, RedDevil, People of
                                    | Interest, The Running Dead, 
                                    | Found, American Guy.
                                  span.mb-2.block Favorite Music Bands :
                                  p  
                                    | Breaking Good, RedDevil, People of
                                    | Interest, The Running Dead, 
                                    | Found, American Guy.
                                  div.social-network.theme-form
                                    span Social Networks
                                    button.btn.social-btn.btn-fb.text-center(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Facebook')
                                      i.fa-brands.fa-facebook-f.m-r-5
                                    button.btn.social-btn.btn-twitter.text-center.mx-2(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Twitter')
                                      i.fa-brands.fa-x-twitter
                                    button.btn.social-btn.btn-dribble.text-center(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Dribble')
                                      i.fa-brands.fa-dribbble
                          div(class="col-span-12 xl:col-span-4 lg:col-span-6 md:col-span-12 xl-30 box-col-6 order-xxl-iii [@media(min-width:320px)_and_(max-width:1660px)]:order-[3]")
                            .card.accordion-item
                              .card-header.accordion-header
                                h5.accordion-button.collapsed.mb-0
                                  button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseicon3', aria-expanded='true', aria-controls='collapseicon3')
                                    | Followers
                              #collapseicon3.accordion-collapse.collapse.show(aria-labelledby='collapseicon3', data-bs-parent='#accordion')
                                .card-body.accordion-body.social-list.filter-cards-view
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/2.png')
                                    .grow
                                      span.block Bucky Barnes
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/3.png')
                                    .grow
                                      span.block Sarah Loren
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/3.jpg')
                                    .grow
                                      span.block Jason Borne
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/10.jpg')
                                    .grow
                                      span.block Comeren Diaz
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/11.png')
                                    .grow
                                      span.block Andew Jon
                                      a(href='#!') Add Friend
                          div(class="col-span-12 xl:col-span-4 lg:col-span-6 md:col-span-12 xl-30 box-col-6 order-xxl-iv [@media(min-width:320px)_and_(max-width:1660px)]:order-[4]")
                            .card.accordion-item
                              .card-header.accordion-header
                                h5.accordion-button.collapsed.mb-0
                                  button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseicon10', aria-expanded='true', aria-controls='collapseicon10')
                                    | Followings
                              #collapseicon10.accordion-collapse.collapse.show(aria-labelledby='collapseicon10', data-bs-parent='#accordion')
                                .card-body.accordion-body.social-list.filter-cards-view
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/3.png')
                                    .grow
                                      span.block Sarah Loren
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/2.png')
                                    .grow
                                      span.block Bucky Barnes
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/10.jpg')
                                    .grow
                                      span.block Comeren Diaz
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/3.jpg')
                                    .grow
                                      span.block Jason Borne
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/11.png')
                                    .grow
                                      span.block Andew Jon
                                      a(href='#!') Add Friend
                          div(class="col-span-12 xl:col-span-4 lg:col-span-12 xl-40 box-col-6 order-xxl-v [@media(min-width:320px)_and_(max-width:1660px)]:order-[5]")
                            .card.accordion-item
                              .card-header.accordion-header
                                h5.accordion-button.collapsed.mb-0
                                  button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseicon4', aria-expanded='true', aria-controls='collapseicon4')
                                    | Latest Photos
                              #collapseicon4.accordion-collapse.collapse.show(data-bs-parent='#accordion', aria-labelledby='collapseicon4')
                                .card-body.accordion-body.photos.filter-cards-view
                                  ul
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-1.png')
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-2.png')
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-3.png')
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-4.png')
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-5.png')
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-6.png')
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-7.png')
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-8.png')
                          div(class="col-span-12 box-col-6 order-xxl-vi [@media(min-width:320px)_and_(max-width:1660px)]:order-[5]")
                            .card.accordion-item
                              .card-header.accordion-header
                                h5.accordion-button.collapsed.mb-0
                                  button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseicon13', aria-expanded='true', aria-controls='collapseicon13')
                                    | Friends
                              #collapseicon13.accordion-collapse.collapse.show(data-bs-parent='#accordion', aria-labelledby='collapseicon13')
                                .card-body.accordion-body.avatar-showcase.filter-cards-view(class="flex flex-wrap")
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/3.jpg', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/5.jpg', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/1.jpg', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/2.png', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/3.png', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/6.jpg', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/10.jpg', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/14.png', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/1.jpg', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/4.jpg', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/11.png', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/8.jpg', alt='#')
                          div(class="col-span-12 xl:col-span-6 lg:col-span-12 xl-50 box-col-6 order-xxl-ii [@media(min-width:320px)_and_(max-width:1660px)]:order-[2]")
                            .card
                              img.max-w-full(src='../assets/images/social-app/timeline-4.png', alt='')
                .tab-pan.fade(data-tabcontent="2")
                  .grid.grid-cols-12.card-gap
                    div(class="col-span-3 xl:col-span-12 lg:col-span-5 md:col-span-12 xl-40 box-col-4")
                      #accordionExample.default-according.style-1.faq-accordion.accordion
                        .card.accordion-item
                          #headingOne.card-header.accordion-header
                            h2.accordion-button.collapsed.mb-0
                              button.btn.btn-link.btn-block.text-start(type='button' data-bs-toggle='collapse' data-bs-target='#collapseOne' aria-expanded='true' aria-controls='collapseOne')
                                | My Profile
                          #collapseOne.accordion-collapse.collapse.show(aria-labelledby='headingOne' data-bs-parent='#accordionExample')
                            .card-body.accordion-body.socialprofile.filter-cards-view
                              .flex.page-notification
                                img.img-50.max-w-full.h-auto.m-r-20.rounded-full(src='../assets/images/dashboard-11/user/7.jpg', alt='')
                                .grow
                                  h6.font-primary.pb-1 My Page
                                  span.block
                                    span
                                      i.fa-regular.fa-comments  
                                      span.px-2 Messages
                                        span.badge.rounded-full.badge-light.ms-2 4
                                  span.block
                                    span
                                      i.fa-regular.fa-bell  
                                      span.px-2 Notification
                                        span.badge.rounded-full.badge-light.ms-2 6
                              .social-btngroup.flex
                                button.btn.btn-primary.text-center.text-white(type='button') Likes
                                button.btn.btn-light.text-center.ms-2(type='button') View
                              .likes-profile.text-center
                                h5 
                                  span.counter(data-target='890')
                                    i.fa-solid.fa-heart.font-danger
                                    |  0
                              div.text-center
                                | 35 New Likes This Week
                              .customers.text-center.social-group
                                ul.flex.justify-center
                                  li.d-inline-block
                                    img.img-40.rounded-full(src='../assets/images/user/3.jpg', alt=''
                                    data-container='body', data-bs-toggle='tooltip', title='Johny Waston')
                                  li.d-inline-block
                                    img.img-40.rounded-full(src='../assets/images/user/5.jpg', alt=''
                                    data-container='body', data-bs-toggle='tooltip', title='Andew Jon')
                                  li.d-inline-block
                                    img.img-40.rounded-full(src='../assets/images/user/1.jpg', alt=''
                                    data-container='body', data-bs-toggle='tooltip', title='Comeren Diaz')
                                  li.d-inline-block
                                    img.img-40.rounded-full(src='../assets/images/user/2.png', alt=''
                                    data-container='body', data-bs-toggle='tooltip', title='Bucky Barnes')
                                  li.d-inline-block
                                    img.img-40.rounded-full(src='../assets/images/user/8.jpg', alt=''
                                    data-container='body', data-bs-toggle='tooltip', title='Jason Borne')
                                  li.d-inline-block
                                    img.img-40.rounded-full(src='../assets/images/user/11.png', alt='' data-container='body', data-bs-toggle='tooltip', title='Comeren Diaz')
                              img.max-w-full.mt-xl-5.mt-4.w-full(alt='', src='../assets/images/social-app/timeline-3.png')
                        .card.accordion-item.mutual-friends
                          #headingTwo.card-header.accordion-header
                            h2.accordion-button.collapsed.mb-0
                              button.btn.btn-link.btn-block.text-start.collapsed(type='button' data-bs-toggle='collapse' data-bs-target='#collapseTwo' aria-expanded='true' aria-controls='collapseTwo')
                                | Mutual Friends
                          #collapseTwo.accordion-collapse.collapse.show(aria-labelledby='headingTwo' data-bs-parent='#accordionExample')
                            .card-body.accordion-body.social-status.filter-cards-view
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/2.png', alt='')
                                .social-status.social-online
                                .grow
                                  span.font-medium.block Bucky Barnes
                                  span.block.fw-normal winter@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/10.jpg', alt='')
                                .social-status.social-busy
                                .grow
                                  span.font-medium.block Sarah Loren
                                  span.block.fw-normal barnes@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/6.jpg', alt='')
                                .social-status.social-offline
                                .grow
                                  span.font-medium.block Jason Borne
                                  span.block.fw-normal jasonb@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/8.jpg', alt='')
                                .social-status.social-offline
                                .grow
                                  span.font-medium.block Comeren Diaz
                                  span.block.fw-normal comere@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/14.png', alt='')
                                .social-status.social-online
                                .grow
                                  span.font-medium.block Andew Jon
                                  span.block.fw-normal andrewj@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/4.jpg', alt='')
                                .social-status.social-busy
                                .grow
                                  span.font-medium.block Johny Waston
                                  span.block.fw-normal johny@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/3.png', alt='')
                                .social-status.social-offline
                                .grow
                                  span.font-medium.block Johny William
                                  span.block.fw-normal johnyw@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/2.png', alt='')
                                .social-status.social-online
                                .grow
                                  span.font-medium.block Bucky Barnes
                                  span.block.fw-normal winter@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/10.jpg', alt='')
                                .social-status.social-busy
                                .grow
                                  span.font-medium.block Sarah Loren
                                  span.block.fw-normal barnes@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/6.jpg', alt='')
                                .social-status.social-offline
                                .grow
                                  span.font-medium.block Jason Borne
                                  span.block.fw-normal jasonb@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/8.jpg', alt='')
                                .social-status.social-offline
                                .grow
                                  span.font-medium.block Comeren Diaz
                                  span.block.fw-normal comere@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/14.png', alt='')
                                .social-status.social-online
                                .grow
                                  span.font-medium.block Andew Jon
                                  span.block.fw-normal andrewj@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/4.jpg', alt='')
                                .social-status.social-busy
                                .grow
                                  span.font-medium.block Johny Waston
                                  span.block.fw-normal johny@gmail.com
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/3.png', alt='')
                                .social-status.social-offline
                                .grow
                                  span.font-medium.block Johny William
                                  span.block.fw-normal johnyw@gmail.com
                        .card.accordion-item
                          #headingThree.card-header.accordion-header
                            h2.accordion-button.collapsed.mb-0
                              button.btn.btn-link.btn-block.text-start.collapsed(type='button' data-bs-toggle='collapse' data-bs-target='#collapseThree' aria-expanded='true' aria-controls='collapseThree')
                                | Activity Feed
                          #collapseThree.accordion-collapse.collapse.show(aria-labelledby='headingThree' data-bs-parent='#accordionExample')
                            .card-body.accordion-body.social-status.filter-cards-view
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/10.jpg', alt='')
                                .grow
                                  span.font-medium.block Andew Jon
                                  p Commented on Aliya Steele's 
                                    a(href='#!') Photo
                                  span.light-span.fw-normal 20 min ago
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/3.jpg', alt='')
                                .grow
                                  span.font-medium.block Johny Waston
                                  p Commented on Max Burton's 
                                    a(href='#!') Photo
                                  span.light-span.fw-normal 1 hour ago
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/5.jpg', alt='')
                                .grow
                                  span.font-medium.block Comeren Diaz
                                  p Commented on Dalary Ayala's 
                                    a(href='#!') Photo
                                  span.light-span.fw-normal 1 days ago
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/4.jpg', alt='')
                                .grow
                                  span.font-medium.block Sarah Loren
                                  p Commented on Clark Byrd's  
                                    a(href='#!') Photo
                                  span.light-span.fw-normal 2 days ago
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/3.jpg', alt='')
                                .grow
                                  span.font-medium.block Johny Waston
                                  p Commented on Colby Olson's 
                                    a(href='#!') Photo
                                  span.light-span.fw-normal 5 days ago
                              .flex
                                img.img-50.rounded-full.m-r-15(src='../assets/images/user/5.jpg', alt='')
                                .grow
                                  span.font-medium.block Comeren Diaz
                                  p Commented on Sonny Case's  
                                    a(href='#!') Photo
                                  span.light-span.fw-normal 6 days ago
                    div(class="col-span-6 xl:col-span-12 lg:col-span-7 md:col-span-12 xl-80 box-col-8e")
                      .grid.grid-cols-12.card-gap
                        div(class="col-span-12")
                          .card
                            .card-header
                              h5 Pepole You May Know
                            .card-body.avatar-showcase
                              .pepole-knows
                                ul
                                  li
                                    .add-friend.text-center
                                      img.img-60.max-w-full.h-auto.rounded-full(alt='', src='../assets/images/user/2.png')
                                      span.block Jason Borne
                                      button.btn.btn-primary.btn-xs.text-white Add Friend
                                  li
                                    .add-friend.text-center
                                      img.img-60.max-w-full.h-auto.rounded-full(alt='', src='../assets/images/user/3.png')
                                      span.block Anna Mull
                                      button.btn.btn-primary.btn-xs.text-white Add Friend
                                  li
                                    .add-friend.text-center
                                      img.img-60.max-w-full.h-auto.rounded-full(alt='', src='../assets/images/user/3.jpg')
                                      span.block Dion Cast
                                      button.btn.btn-primary.btn-xs.text-white Add Friend
                                  li
                                    .add-friend.text-center
                                      img.img-60.max-w-full.h-auto.rounded-full(alt='', src='../assets/images/user/4.jpg')
                                      span.block Karlene Lex
                                      button.btn.btn-primary.btn-xs.text-white Add Friend
                                  li
                                    .add-friend.text-center
                                      img.img-60.max-w-full.h-auto.rounded-full(alt='', src='../assets/images/user/8.jpg')
                                      span.block Vella Chism
                                      button.btn.btn-primary.btn-xs.text-white Add Friend
                                  li
                                    .add-friend.text-center
                                      img.img-60.max-w-full.h-auto.rounded-full(alt='', src='../assets/images/user/10.jpg')
                                      span.block Wai Schalk
                                      button.btn.btn-primary.btn-xs.text-white Add Friend
                                  li
                                    .add-friend.text-center
                                      img.img-60.max-w-full.h-auto.rounded-full(alt='', src='../assets/images/user/14.png')
                                      span.block Karlene Lex
                                      button.btn.btn-primary.btn-xs.text-white Add Friend
                        div(class="col-span-12")
                          .card
                            .card-header.social-header
                              h5.common-space
                                span Hobbies and Interests
                                span.pull-right
                                  i(data-feather='more-vertical')
                            .card-body
                              .grid.grid-cols-12.card-gap.details-about
                                div(class="col-span-6 sm:col-span-12")
                                  .your-details
                                    span.font-medium.mb-2.block Hobbies:
                                    p I like to ride the bike to work, swimming, and working out. I also like reading design magazines, go to museums, and binge watching a good tv show while it’s raining outside.
                                div(class="col-span-6 sm:col-span-12")
                                  .your-details.your-details-xs
                                    span.font-medium.mb-2.block Favorite Music Bands / Artists:
                                    p Iron Maid, DC/AC, Megablow, The Ill, Kung Fighters, System of a Revenge.
                              .grid.grid-cols-12.card-gap.details-about
                                div(class="col-span-6 sm:col-span-12")
                                  .your-details
                                    span.font-medium.mb-2.block Favorite TV Shows:
                                    p Breaking Good, RedDevil, People of Interest, The Running Dead, Found, American Guy.
                                div(class="col-span-6 sm:col-span-12")
                                  .your-details.your-details-xs
                                    span.font-medium.mb-2.block Favorite Books:
                                    p The Crime of the Century, Egiptian Mythology 101, The Scarred Wizard, Lord of the Wings, Amongst Gods, The Oracle, A Tale of Air and Water.
                              .grid.grid-cols-12.card-gap.details-about
                                div(class="col-span-6 sm:col-span-12")
                                  .your-details
                                    span.font-medium.mb-2.block Favorite Movies:
                                    p Idiocratic, The Scarred Wizard and the Fire Crown, Crime Squad Ferrum Man.
                                div(class="col-span-6 sm:col-span-12")
                                  .your-details.your-details-xs
                                    span.font-medium.mb-2.block Favorite Writers:
                                    p Martin T. Georgeston, Jhonathan R. Token, Ivana Rowle, Alexandr Platt, Marcus Roth.
                              .grid.grid-cols-12.card-gap.details-about
                                div(class="col-span-6 sm:col-span-12")
                                  .your-details
                                    span.font-medium.mb-2.block Favorite Games:
                                    p The First of Us, Assassin’s Squad, Dark Assylum, NMAK16, Last Cause 4, Grand Snatch Auto.
                                div(class="col-span-6 sm:col-span-12")
                                  .your-details.your-details-xs
                                    span.font-medium.mb-2.block Other Interests:
                                    p Swimming, Surfing, Scuba Diving, Anime, Photography, Tattoos, Street Art.
                        div(class="col-span-12")
                          .card
                            .card-header.social-header
                              h5 
                                span Education and Employement
                                span.pull-right
                                  i(data-feather='more-vertical')
                            .card-body
                              .grid.grid-cols-12.details-about
                                div(class="col-span-6 sm:col-span-12")
                                  .your-details
                                    span.font-medium The New College of Design
                                    p 2001 - 2006
                                    p Breaking Good, RedDevil, People of Interest, The Running Dead, Found, American Guy.
                                div(class="col-span-6 sm:col-span-12")
                                  .your-details.your-details-xs
                                    span.font-medium Digital Design Intern
                                    p 2006-2008
                                    p Digital Design Intern for the “Multimedz” agency. Was in charge of the communication with the clients.
                              .grid.grid-cols-12.details-about
                                div(class="col-span-6 sm:col-span-12")
                                  .your-details
                                    span.font-medium Rembrandt Institute
                                    p 2008
                                    p Five months Digital Illustration course. Professor: Leonardo Stagg.
                                div(class="col-span-6 sm:col-span-12")
                                  .your-details.your-details-xs
                                    span.font-medium UI/UX Designer
                                    p 2001 - 2006
                                    p Breaking Good, RedDevil, People of Interest, The Running Dead, Found, American Guy.
                              .grid.grid-cols-12.details-about
                                div(class="col-span-6 sm:col-span-12")
                                  .your-details
                                    span.font-medium The Digital College
                                    p 2010
                                    p 6 months intensive Motion Graphics course. After Effects and Premire. Professor: Donatello Urtle.
                                div(class="col-span-6 sm:col-span-12")
                                  .your-details.your-details-xs
                                    span.font-medium The New College of Design
                                    p 2008 - 2013
                                    p UI/UX Designer for the “Daydreams” agency.
                        div(class="col-span-12")
                          .card
                            .card-header
                              h5 Viewed Your Profile
                            .card-body.avatar-showcase
                              .pepole-knows
                                ul
                                  li
                                    .add-friend.text-center
                                      img.img-60.max-w-full.h-auto.rounded-full(alt='', src='../assets/images/user/2.png')
                                      span.block Jason Borne
                                      button.btn.btn-primary.btn-xs.text-white Add Friend
                                  li
                                    .add-friend.text-center
                                      img.img-60.max-w-full.h-auto.rounded-full(alt='', src='../assets/images/user/3.png')
                                      span.block Anna Mull
                                      button.btn.btn-primary.btn-xs.text-white Add Friend
                                  li
                                    .add-friend.text-center
                                      img.img-60.max-w-full.h-auto.rounded-full(alt='', src='../assets/images/user/3.jpg')
                                      span.block Dion Cast
                                      button.btn.btn-primary.btn-xs.text-white Add Friend
                                  li
                                    .add-friend.text-center
                                      img.img-60.max-w-full.h-auto.rounded-full(alt='', src='../assets/images/user/4.jpg')
                                      span.block Karlene Lex
                                      button.btn.btn-primary.btn-xs.text-white Add Friend
                                  li
                                    .add-friend.text-center
                                      img.img-60.max-w-full.h-auto.rounded-full(alt='', src='../assets/images/user/8.jpg')
                                      span.block Vella Chism
                                      button.btn.btn-primary.btn-xs.text-white Add Friend
                                  li
                                    .add-friend.text-center
                                      img.img-60.max-w-full.h-auto.rounded-full(alt='', src='../assets/images/user/10.jpg')
                                      span.block Wai Schalk
                                      button.btn.btn-primary.btn-xs.text-white Add Friend
                                  li
                                    .add-friend.text-center
                                      img.img-60.max-w-full.h-auto.rounded-full(alt='', src='../assets/images/user/14.png')
                                      span.block Karlene Lex
                                      button.btn.btn-primary.btn-xs.text-white Add Friend
                        div(class="col-span-12")
                          .card
                            .card-header
                              h5 Activity Log
                            .card-body
                              .activity-log
                                .my-activity
                                  h6.mb-3 Today
                                  p
                                    span
                                      i.m-r-20(data-feather='user-plus')
                                    | Posts can be created, edited, or deleted.
                                  p
                                    span
                                      i.m-r-20(data-feather='thumbs-up')
                                    | Engagement metrics for a post, such as shares, comments, or likes.
                                  p
                                    span
                                      i.m-r-20(data-feather='thumbs-up')
                                    | Posts that have been reported or flagged.
                                  p
                                    span
                                      i.m-r-20(data-feather='user-plus')
                                    | User profile modifications (such as changing bios, personal information, or profile photos).
                                  p
                                    span
                                      i.m-r-20(data-feather='user-plus')
                                    | If your app allows verified profiles, it will update the verification status.
                                  p
                                    span
                                      i.m-r-20(data-feather='user-plus')
                                    | Friend requests were sent and accepted.
                                .my-activity
                                  h6.mb-3 25 December
                                  p
                                    span
                                      i.m-r-20(data-feather='message-square')
                                    | The user's password was successfully altered.
                                  p
                                    span
                                      i.m-r-20(data-feather='message-square')
                                    | The user looked over the logs of recent activities.
                                  p
                                    span
                                      i.m-r-20(data-feather='user-plus')
                                    | Alerts about users who have been unfriended or are new connections.
                                  p
                                    span
                                      i.m-r-20(data-feather='user-plus')
                                    | User enrolled in the group "Developer Team".
                                  p
                                    span
                                      i.m-r-20(data-feather='message-square')
                                    | Activity logs that the user exported to a CSV file.
                                  p
                                    span
                                      i.m-r-20(data-feather='message-square')
                                    | The user's inactive session ended.
                                .my-activity
                                  h6.mb-3 8 September
                                  p
                                    span
                                      i.m-r-20(data-feather='thumbs-up')
                                    | New event that the user added to the calendar.
                                  p
                                    span
                                      i.m-r-20(data-feather='message-square')
                                    | The user changed the location settings to reflect New York.
                                  p
                                    span
                                      i.m-r-20(data-feather='message-square')
                                    | A new functionality for mobile alerts.
                                  p
                                    span
                                      i.m-r-20(data-feather='message-square')
                                    | The user's inactive session ended.
                                  p
                                    span
                                      i.m-r-20(data-feather='message-square')
                                    | The phone number has been updated to (555) 123-4567.
                                  p
                                    span
                                      i.m-r-20(data-feather='user-plus')
                                    | Andew Jon became friends with comeren Diaz.
                                .my-activity
                                  h6.mb-3 6 June
                                  p
                                    span
                                      i.m-r-20(data-feather='thumbs-up')
                                    | Participation in group chats, such as entering or exiting a group.
                                  p
                                    span
                                      i.m-r-20(data-feather='user-plus')
                                    | Messages sent or received (only timestamps and other metadata, not content).
                                  p
                                    span
                                      i.m-r-20(data-feather='thumbs-up')
                                    | Log of the alerts that users have received.
                                  p
                                    span
                                      i.m-r-20(data-feather='user-plus')
                                    | Records of suggested stuff that was watched.
                                  p
                                    span
                                      i.m-r-20(data-feather='user-plus')
                                    | Views, comments, and reactions on stories are examples of interaction metrics.
                                  p
                                    span
                                      i.m-r-20(data-feather='message-square')
                                    | The user disregarded a system alert for a fresh upgrade.
                    div(class="col-span-3 xl:col-span-12 xl-100 box-col-12")
                      #accordionoc1.default-according.style-1.faq-accordion.job-accordion.accordion
                        .grid.grid-cols-12.card-gap
                          div(class="col-span-12 xl:col-span-6 lg:col-span-12 xl-50 box-col-6 order-xxl-i [@media(min-width:320px)_and_(max-width:1660px)]:order-[1]")
                            .card.accordion-item
                              .card-header.accordion-header
                                h5.accordion-button.collapsed.mb-0
                                  button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseicon2', aria-expanded='true', aria-controls='collapseicon2')
                                    | Profile Intro
                              #collapseicon2.accordion-collapse.collapse.show(aria-labelledby='collapseicon2', data-bs-parent='#accordion')
                                .card-body.accordion-body.filter-cards-view
                                  span.mb-2.block About Me :
                                  p  
                                    | Hi, I’m elana, I’m 30 and I work as a 
                                    | web designer for the “Daydreams” 
                                    | Agency in pier 56.
                                  span.mb-2.block Favorite TV Shows :
                                  p  
                                    | Breaking Good, RedDevil, People of
                                    | Interest, The Running Dead, 
                                    | Found, American Guy.
                                  span.mb-2.block Favorite Music Bands :
                                  p  
                                    | Breaking Good, RedDevil, People of
                                    | Interest, The Running Dead, 
                                    | Found, American Guy.
                                  div.social-network.theme-form
                                    span Social Networks
                                    button.btn.social-btn.btn-fb.text-center(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Facebook')
                                      i.fa-brands.fa-facebook-f.m-r-5
                                    button.btn.social-btn.btn-twitter.text-center.mx-2(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Twitter')
                                      i.fa-brands.fa-x-twitter
                                    button.btn.social-btn.btn-dribble.text-center(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Dribble')
                                      i.fa-brands.fa-dribbble
                          div(class="col-span-12 xl:col-span-4 lg:col-span-6 md:col-span-12 xl-50 box-col-6 order-xxl-iii [@media(min-width:320px)_and_(max-width:1660px)]:order-[3]")
                            .card.accordion-item
                              .card-header.accordion-header
                                h5.accordion-button.collapsed.mb-0
                                  button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseicon3', aria-expanded='true', aria-controls='collapseicon3')
                                    | Followers
                              #collapseicon3.accordion-collapse.collapse.show(aria-labelledby='collapseicon3', data-bs-parent='#accordion')
                                .card-body.accordion-body.social-list.filter-cards-view
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/2.png')
                                    .grow
                                      span.block Bucky Barnes
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/3.png')
                                    .grow
                                      span.block Sarah Loren
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/3.jpg')
                                    .grow
                                      span.block Jason Borne
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/10.jpg')
                                    .grow
                                      span.block Comeren Diaz
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/11.png')
                                    .grow
                                      span.block Andew Jon
                                      a(href='#!') Add Friend
                          div(class="col-span-12 xl:col-span-4 lg:col-span-6 md:col-span-12 xl-50 box-col-6 order-xxl-iv [@media(min-width:320px)_and_(max-width:1660px)]:order-[4]")
                            .card.accordion-item
                              .card-header.accordion-header
                                h5.accordion-button.collapsed.mb-0
                                  button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseicon10', aria-expanded='true', aria-controls='collapseicon10')
                                    | Followings
                              #collapseicon10.accordion-collapse.collapse.show(aria-labelledby='collapseicon10', data-bs-parent='#accordion')
                                .card-body.accordion-body.social-list.filter-cards-view
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/3.png')
                                    .grow
                                      span.block Sarah Loren
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/2.png')
                                    .grow
                                      span.block Bucky Barnes
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/10.jpg')
                                    .grow
                                      span.block Comeren Diaz
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/3.jpg')
                                    .grow
                                      span.block Jason Borne
                                      a(href='#!') Add Friend
                                  .social-flex
                                    img.img-50.max-w-full.h-auto.m-r-20.rounded-full(alt='', src='../assets/images/user/11.png')
                                    .grow
                                      span.block Andew Jon
                                      a(href='#!') Add Friend
                          div(class="col-span-12 xl:col-span-4 lg:col-span-12 xl-50 box-col-6 order-xxl-v [@media(min-width:320px)_and_(max-width:1660px)]:order-[5]")
                            .card.accordion-item
                              .card-header.accordion-header
                                h5.accordion-button.collapsed.mb-0
                                  button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseicon4', aria-expanded='true', aria-controls='collapseicon4')
                                    | Latest Photos
                              #collapseicon4.accordion-collapse.collapse.show(data-bs-parent='#accordion', aria-labelledby='collapseicon4')
                                .card-body.accordion-body.photos.filter-cards-view
                                  ul
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-1.png')
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-2.png')
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-3.png')
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-4.png')
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-5.png')
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-6.png')
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-7.png')
                                    li
                                        img.max-w-full(alt='', src='../assets/images/social-app/post-8.png')
                          div(class="col-span-12 box-col-6 order-xxl-vi [@media(min-width:320px)_and_(max-width:1660px)]:order-[5]")
                            .card.accordion-item
                              .card-header.accordion-header
                                h5.accordion-button.collapsed.mb-0
                                  button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseicon13', aria-expanded='true', aria-controls='collapseicon13')
                                    | Friends
                              #collapseicon13.accordion-collapse.collapse.show(data-bs-parent='#accordion', aria-labelledby='collapseicon13')
                                .card-body.accordion-body.avatar-showcase.filter-cards-view(class="flex flex-wrap")
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/3.jpg', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/5.jpg', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/1.jpg', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/2.png', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/3.png', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/6.jpg', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/10.jpg', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/14.png', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/1.jpg', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/4.jpg', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/11.png', alt='#')
                                  .d-inline-block.friend-pic
                                    img.img-50.rounded-full(src='../assets/images/user/8.jpg', alt='#')
                          div(class="col-span-12 xl:col-span-6 lg:col-span-12 xl-50 box-col-6 order-xxl-ii [@media(min-width:320px)_and_(max-width:1660px)]:order-[2]")
                            .card
                              img.max-w-full(src='../assets/images/social-app/timeline-4.png', alt='')
                .tab-pan.fade(data-tabcontent="3")
                  .grid.grid-cols-12.card-gap.social-friends
                    div(class="col-span-3 xxl:col-span-4 xl:col-span-6 md:col-span-12 col-ed-4 box-col-4")
                      .card.social-profile
                        .card-body
                          .common-social-box
                            div
                              .social-img-wrap 
                                .social-img
                                  img(src="../assets/images/dashboard-5/profile.png", alt="profile")
                                .edit-icon
                                  svg
                                    use(href='../assets/svg/icon-sprite.svg#profile-check')
                            div
                              h5
                                a(href="social-app.html") Brooklyn Simmons
                              span.c-o-light @brookly.simmons
                          .social-details
                            ul.social-follow 
                              li
                                h5.mb-0.counter(data-target='1908') 0
                                span.c-o-light Posts
                              li
                                h5.mb-0 34.5k
                                span.c-o-light Followers
                              li
                                h5.mb-0.counter(data-target='897') 0
                                span.c-o-light Following
                            ul.card-social
                              li
                                a(href='https://www.facebook.com/' target="_blank")
                                  i.fa-brands.fa-facebook-f
                              li
                                a(href='https://accounts.google.com/' target="_blank")
                                  i.fa-brands.fa-linkedin-in
                              li
                                a(href='https://twitter.com/' target="_blank")
                                  i.fa-brands.fa-x-twitter
                              li
                                a(href='https://www.instagram.com/' target="_blank")
                                  i.fa-brands.fa-instagram
                              li
                                a(href='https://youtube.com/' target="_blank")
                                  i.fa-brands.fa-youtube
                    div(class="col-span-3 xxl:col-span-4 xl:col-span-6 md:col-span-12 col-ed-4 box-col-4")
                      .card.social-profile
                        .card-body
                          .common-social-box 
                            div
                              .social-img-wrap 
                                .social-img
                                  img.max-w-full(src="../assets/images/avtar/3.jpg", alt="profile")
                                .edit-icon
                                  svg
                                    use(href='../assets/svg/icon-sprite.svg#profile-check')
                            div
                              h5
                                a(href="social-app.html") Mark Jecno
                              span.c-o-light @mark.jeco
                          .social-details
                            ul.social-follow 
                              li
                                h5.mb-0.counter(data-target='875') 0
                                span.c-o-light Posts
                              li
                                h5.mb-0 12.5k
                                span.c-o-light Followers
                              li
                                h5.mb-0.counter(data-target='1400') 0
                                span.c-o-light Following
                            ul.card-social
                              li
                                a(href='https://www.facebook.com/' target="_blank")
                                  i.fa-brands.fa-facebook-f
                              li
                                a(href='https://accounts.google.com/' target="_blank")
                                  i.fa-brands.fa-linkedin-in
                              li
                                a(href='https://twitter.com/' target="_blank")
                                  i.fa-brands.fa-x-twitter
                              li
                                a(href='https://www.instagram.com/' target="_blank")
                                  i.fa-brands.fa-instagram
                              li
                                a(href='https://youtube.com/' target="_blank")
                                  i.fa-brands.fa-youtube
                    div(class="col-span-3 xxl:col-span-4 xl:col-span-6 md:col-span-12 col-ed-4 box-col-4")
                      .card.social-profile
                        .card-body
                          .common-social-box
                            div
                              .social-img-wrap 
                                .social-img
                                  img.max-w-full(src="../assets/images/avtar/11.jpg", alt="profile")
                                .edit-icon
                                  svg
                                    use(href='../assets/svg/icon-sprite.svg#profile-check')
                            div 
                              h5
                                a(href="social-app.html") Dev John
                              span.c-o-light @john.dev
                          .social-details
                            ul.social-follow 
                              li
                                h5.mb-0.counter(data-target='1274') 0
                                span.c-o-light Posts
                              li
                                h5.mb-0 15.5k
                                span.c-o-light Followers
                              li
                                h5.mb-0.counter(data-target='1874') 0
                                span.c-o-light Following
                            ul.card-social
                              li
                                a(href='https://www.facebook.com/' target="_blank")
                                  i.fa-brands.fa-facebook-f
                              li
                                a(href='https://accounts.google.com/' target="_blank")
                                  i.fa-brands.fa-linkedin-in
                              li
                                a(href='https://twitter.com/' target="_blank")
                                  i.fa-brands.fa-x-twitter
                              li
                                a(href='https://www.instagram.com/' target="_blank")
                                  i.fa-brands.fa-instagram
                              li
                                a(href='https://youtube.com/' target="_blank")
                                  i.fa-brands.fa-youtube
                    div(class="col-span-3 xxl:col-span-4 xl:col-span-6 md:col-span-12 col-ed-4 box-col-4")
                      .card.social-profile
                        .card-body
                          .common-social-box
                            div   
                              .social-img-wrap 
                                .social-img
                                  img.max-w-full(src="../assets/images/avtar/16.jpg", alt="profile")
                                .edit-icon
                                  svg
                                    use(href='../assets/svg/icon-sprite.svg#profile-check')
                            div
                              h5
                                a(href="social-app.html") Johan Deo
                              span.c-o-light @deo.johan
                          .social-details
                            ul.social-follow 
                              li
                                h5.mb-0.counter(data-target='500') 0
                                span.c-o-light Posts
                              li
                                h5.mb-0 8.2k
                                span.c-o-light Followers
                              li
                                h5.mb-0.counter(data-target='570') 0
                                span.c-o-light Following
                            ul.card-social
                              li
                                a(href='https://www.facebook.com/' target="_blank")
                                  i.fa-brands.fa-facebook-f
                              li
                                a(href='https://accounts.google.com/' target="_blank")
                                  i.fa-brands.fa-linkedin-in
                              li
                                a(href='https://twitter.com/' target="_blank")
                                  i.fa-brands.fa-x-twitter
                              li
                                a(href='https://www.instagram.com/' target="_blank")
                                  i.fa-brands.fa-instagram
                              li
                                a(href='https://youtube.com/' target="_blank")
                                  i.fa-brands.fa-youtube
                    div(class="col-span-3 xxl:col-span-4 xl:col-span-6 md:col-span-12 col-ed-4 box-col-4")
                      .card.social-profile
                        .card-body
                          .common-social-box
                            div
                              .social-img-wrap 
                                .social-img
                                  img.max-w-full(src="../assets/images/user/7.jpg", alt="profile")
                                .edit-icon
                                  svg
                                    use(href='../assets/svg/icon-sprite.svg#profile-check')
                            div   
                              h5
                                a(href="social-app.html") Douglas Reichel
                              span.c-o-light @reichel.douglas
                          .social-details
                            ul.social-follow 
                              li
                                h5.mb-0.counter(data-target='460') 0
                                span.c-o-light Posts
                              li
                                h5.mb-0 2k
                                span.c-o-light Followers
                              li
                                h5.mb-0.counter(data-target='350') 0
                                span.c-o-light Following
                            ul.card-social
                              li
                                a(href='https://www.facebook.com/' target="_blank")
                                  i.fa-brands.fa-facebook-f
                              li
                                a(href='https://accounts.google.com/' target="_blank")
                                  i.fa-brands.fa-linkedin-in
                              li
                                a(href='https://twitter.com/' target="_blank")
                                  i.fa-brands.fa-x-twitter
                              li
                                a(href='https://www.instagram.com/' target="_blank")
                                  i.fa-brands.fa-instagram
                              li
                                a(href='https://youtube.com/' target="_blank")
                                  i.fa-brands.fa-youtube
                    div(class="col-span-3 xxl:col-span-4 xl:col-span-6 md:col-span-12 col-ed-4 box-col-4")
                      .card.social-profile
                        .card-body
                          .common-social-box
                            div
                              .social-img-wrap 
                                .social-img
                                  img.max-w-full(src="../assets/images/avtar/4.jpg", alt="profile")
                                .edit-icon
                                  svg
                                    use(href='../assets/svg/icon-sprite.svg#profile-check')
                            div 
                              h5
                                a(href="social-app.html") Lisa lillian
                              span.c-o-light @lisa.lillian
                          .social-details
                            ul.social-follow 
                              li
                                h5.mb-0.counter(data-target='547') 0
                                span.c-o-light Posts
                              li
                                h5.mb-0 3.5k
                                span.c-o-light Followers
                              li
                                h5.mb-0.counter(data-target='822') 0
                                span.c-o-light Following
                            ul.card-social
                              li
                                a(href='https://www.facebook.com/' target="_blank")
                                  i.fa-brands.fa-facebook-f
                              li
                                a(href='https://accounts.google.com/' target="_blank")
                                  i.fa-brands.fa-linkedin-in
                              li
                                a(href='https://twitter.com/' target="_blank")
                                  i.fa-brands.fa-x-twitter
                              li
                                a(href='https://www.instagram.com/' target="_blank")
                                  i.fa-brands.fa-instagram
                              li
                                a(href='https://youtube.com/' target="_blank")
                                  i.fa-brands.fa-youtube
                    div(class="col-span-3 xxl:col-span-4 xl:col-span-6 md:col-span-12 col-ed-4 box-col-4")
                      .card.social-profile
                        .card-body
                          .common-social-box
                            div
                              .social-img-wrap 
                                .social-img
                                  img.max-w-full(src="../assets/images/user/1.jpg", alt="profile")
                                .edit-icon
                                  svg
                                    use(href='../assets/svg/icon-sprite.svg#profile-check')
                            div 
                              h5
                                a(href="social-app.html") Olivia rose
                              span.c-o-light @rose.olivia
                          .social-details
                            ul.social-follow 
                              li
                                h5.mb-0.counter(data-target='868') 0
                                span.c-o-light Posts
                              li
                                h5.mb-0 1k
                                span.c-o-light Followers
                              li
                                h5.mb-0.counter(data-target='742') 0
                                span.c-o-light Following
                            ul.card-social
                              li
                                a(href='https://www.facebook.com/' target="_blank")
                                  i.fa-brands.fa-facebook-f
                              li
                                a(href='https://accounts.google.com/' target="_blank")
                                  i.fa-brands.fa-linkedin-in
                              li
                                a(href='https://twitter.com/' target="_blank")
                                  i.fa-brands.fa-x-twitter
                              li
                                a(href='https://www.instagram.com/' target="_blank")
                                  i.fa-brands.fa-instagram
                              li
                                a(href='https://youtube.com/' target="_blank")
                                  i.fa-brands.fa-youtube
                    div(class="col-span-3 xxl:col-span-4 xl:col-span-6 md:col-span-12 col-ed-4 box-col-4")
                      .card.social-profile
                        .card-body
                          .common-social-box
                            div
                              .social-img-wrap 
                                .social-img
                                  img.max-w-full(src="../assets/images/user/2.png", alt="profile")
                                .edit-icon
                                  svg
                                    use(href='../assets/svg/icon-sprite.svg#profile-check')
                            div 
                              h5
                                a(href="social-app.html") Sarah Karen
                              span.c-o-light @karen.sarah
                          .social-details
                            ul.social-follow 
                              li
                                h5.mb-0.counter(data-target='972') 0
                                span.c-o-light Posts
                              li
                                h5.mb-0 2.5k
                                span.c-o-light Followers
                              li
                                h5.mb-0.counter(data-target='864') 0
                                span.c-o-light Following
                            ul.card-social
                              li
                                a(href='https://www.facebook.com/' target="_blank")
                                  i.fa-brands.fa-facebook-f
                              li
                                a(href='https://accounts.google.com/' target="_blank")
                                  i.fa-brands.fa-linkedin-in
                              li
                                a(href='https://twitter.com/' target="_blank")
                                  i.fa-brands.fa-x-twitter
                              li
                                a(href='https://www.instagram.com/' target="_blank")
                                  i.fa-brands.fa-instagram
                              li
                                a(href='https://youtube.com/' target="_blank")
                                  i.fa-brands.fa-youtube
                .tab-pan.fade(data-tabcontent="4")
                  .grid.grid-cols-12.card-gap
                    div(class="col-span-12")
                      .card
                        .my-gallery.card-body.gallery-with-description(itemscope='')
                          .grid.grid-cols-12.card-gap
                            figure(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4" itemprop='associatedMedia', itemscope='')
                              a(href='../assets/images/big-lightgallery/01.jpg', itemprop='contentUrl', data-size='1600x950')
                                img(src='../assets/images/lightgallery/01.jpg', itemprop='thumbnail', alt='Image description')
                                .caption
                                  h4 Johan Deo
                                  p.mt-1
                                    | An admin theme is a visually beautiful and practical design template created especially for a website's or application's backend.
                                  ul.common-flex
                                    li 
                                      i.fa-regular.fa-heart
                                      span 2.4K
                                    li 
                                      i.fa-regular.fa-comments
                                      span 575
                                    li 
                                      i.fa-regular.fa-paper-plane
                              figcaption(itemprop='caption description')
                                h4 Johan Deo
                                p.mt-1
                                  | An admin theme is a visually beautiful and practical design template created especially for a website's or application's backend.
                                ul.common-flex
                                  li 
                                    i.fa-regular.fa-heart
                                    span 2.4K
                                  li 
                                    i.fa-regular.fa-comments
                                    span 575
                                  li 
                                    i.fa-regular.fa-paper-plane
                            figure(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4" itemprop='associatedMedia', itemscope='')
                              a(href='../assets/images/big-lightgallery/02.jpg', itemprop='contentUrl', data-size='1600x950')
                                img(src='../assets/images/lightgallery/02.jpg', itemprop='thumbnail', alt='Image description')
                                .caption
                                  h4 Dev John
                                  p.mt-1
                                    | Effectively manage users with our user-friendly dashboard, which includes customisable widgets and real-time data metrics.
                                  ul.common-flex
                                    li 
                                      i.fa-regular.fa-heart
                                      span 2.4K
                                    li 
                                      i.fa-regular.fa-comments
                                      span 575
                                    li 
                                      i.fa-regular.fa-paper-plane
                              figcaption(itemprop='caption description')
                                h4 Dev John
                                p.mt-1
                                  | Effectively manage users with our user-friendly dashboard, which includes customisable widgets and real-time data metrics.
                                ul.common-flex
                                  li 
                                    i.fa-regular.fa-heart
                                    span 2.4K
                                  li 
                                    i.fa-regular.fa-comments
                                    span 575
                                  li 
                                    i.fa-regular.fa-paper-plane
                            figure(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4" itemprop='associatedMedia', itemscope='')
                              a(href='../assets/images/big-lightgallery/03.jpg', itemprop='contentUrl', data-size='1600x950')
                                img(src='../assets/images/lightgallery/03.jpg', itemprop='thumbnail', alt='Image description')
                                .caption
                                  h4 Gwen Rice
                                  p.mt-1
                                    | With just a few clicks, create thorough reports that provide insightful information about your business activities.
                                  ul.common-flex
                                    li 
                                      i.fa-regular.fa-heart
                                      span 2.4K
                                    li 
                                      i.fa-regular.fa-comments
                                      span 575
                                    li 
                                      i.fa-regular.fa-paper-plane
                              figcaption(itemprop='caption description')
                                h4 Gwen Rice
                                p.mt-1
                                  | With just a few clicks, create thorough reports that provide insightful information about your business activities.
                                ul.common-flex
                                  li 
                                    i.fa-regular.fa-heart
                                    span 2.4K
                                  li 
                                    i.fa-regular.fa-comments
                                    span 575
                                  li 
                                    i.fa-regular.fa-paper-plane
                            figure(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4" itemprop='associatedMedia', itemscope='')
                              a(href='../assets/images/big-lightgallery/04.jpg', itemprop='contentUrl', data-size='1600x950')
                                img(src='../assets/images/lightgallery/04.jpg', itemprop='thumbnail', alt='Image description')
                                .caption
                                  h4 Comeren Diaz
                                  p.mt-1
                                    | With a personalised activity feed that includes posts, images, and updates, you can stay in touch with friends and follow trends.
                                  ul.common-flex
                                    li 
                                      i.fa-regular.fa-heart
                                      span 2.4K
                                    li 
                                      i.fa-regular.fa-comments
                                      span 575
                                    li 
                                      i.fa-regular.fa-paper-plane
                              figcaption(itemprop='caption description')
                                h4 Comeren Diaz
                                p.mt-1
                                  | With a personalised activity feed that includes posts, images, and updates, you can stay in touch with friends and follow trends.
                                ul.common-flex
                                  li 
                                    i.fa-regular.fa-heart
                                    span 2.4K
                                  li 
                                    i.fa-regular.fa-comments
                                    span 575
                                  li 
                                    i.fa-regular.fa-paper-plane
                            figure(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4" itemprop='associatedMedia', itemscope='')
                              a(href='../assets/images/big-lightgallery/05.jpg', itemprop='contentUrl', data-size='1600x950')
                                img(src='../assets/images/lightgallery/05.jpg', itemprop='thumbnail', alt='Image description')
                                .caption
                                  h4 Leo Macias
                                  p.mt-1
                                    | Customise your accounts with cover photographs, biographies, and profile pictures to express who you are.
                                  ul.common-flex
                                    li 
                                      i.fa-regular.fa-heart
                                      span 2.4K
                                    li 
                                      i.fa-regular.fa-comments
                                      span 575
                                    li 
                                      i.fa-regular.fa-paper-plane
                              figcaption(itemprop='caption description')
                                h4 Leo Macias
                                p.mt-1
                                  | Customise your accounts with cover photographs, biographies, and profile pictures to express who you are.
                                ul.common-flex
                                  li 
                                    i.fa-regular.fa-heart
                                    span 2.4K
                                  li 
                                    i.fa-regular.fa-comments
                                    span 575
                                  li 
                                    i.fa-regular.fa-paper-plane
                            figure(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4" itemprop='associatedMedia', itemscope='')
                              a(href='../assets/images/big-lightgallery/011.jpg', itemprop='contentUrl', data-size='1600x950')
                                img(src='../assets/images/lightgallery/011.jpg', itemprop='thumbnail', alt='Image description')
                                .caption
                                  h4 Sarah Loren
                                  p.mt-1
                                    | Use our built-in live streaming function to go live and share experiences with your followers in real time.
                                  ul.common-flex
                                    li 
                                      i.fa-regular.fa-heart
                                      span 2.4K
                                    li 
                                      i.fa-regular.fa-comments
                                      span 575
                                    li 
                                      i.fa-regular.fa-paper-plane
                              figcaption(itemprop='caption description')
                                h4 Sarah Loren
                                p.mt-1
                                  | Use our built-in live streaming function to go live and share experiences with your followers in real time.
                                ul.common-flex
                                  li 
                                    i.fa-regular.fa-heart
                                    span 2.4K
                                  li 
                                    i.fa-regular.fa-comments
                                    span 575
                                  li 
                                    i.fa-regular.fa-paper-plane
                            figure(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4" itemprop='associatedMedia', itemscope='')
                              a(href='../assets/images/big-lightgallery/010.jpg', itemprop='contentUrl', data-size='1600x950')
                                img(src='../assets/images/lightgallery/010.jpg', itemprop='thumbnail', alt='Image description')
                                .caption
                                  h4 Andew Jon
                                  p.mt-1
                                    | Gather and handle user reviews straight from the administrative dashboard to ensure ongoing development.
                                  ul.common-flex
                                    li 
                                      i.fa-regular.fa-heart
                                      span 2.4K
                                    li 
                                      i.fa-regular.fa-comments
                                      span 575
                                    li 
                                      i.fa-regular.fa-paper-plane
                              figcaption(itemprop='caption description')
                                h4 Andew Jon
                                p.mt-1
                                  | Gather and handle user reviews straight from the administrative dashboard to ensure ongoing development.
                                ul.common-flex
                                  li 
                                    i.fa-regular.fa-heart
                                    span 2.4K
                                  li 
                                    i.fa-regular.fa-comments
                                    span 575
                                  li 
                                    i.fa-regular.fa-paper-plane
                            figure(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4" itemprop='associatedMedia', itemscope='')
                              a(href='../assets/images/big-lightgallery/08.jpg', itemprop='contentUrl', data-size='1600x950')
                                img(src='../assets/images/lightgallery/08.jpg', itemprop='thumbnail', alt='Image description')
                                .caption
                                  h4 Bucky Barnes
                                  p.mt-1
                                    | With scheduled backup and simple restore options for important data, you can guarantee data security.
                                  ul.common-flex
                                    li 
                                      i.fa-regular.fa-heart
                                      span 2.4K
                                    li 
                                      i.fa-regular.fa-comments
                                      span 575
                                    li 
                                      i.fa-regular.fa-paper-plane
                              figcaption(itemprop='caption description')
                                h4 Bucky Barnes
                                p.mt-1
                                  | With scheduled backup and simple restore options for important data, you can guarantee data security.
                                ul.common-flex
                                  li 
                                    i.fa-regular.fa-heart
                                    span 2.4K
                                  li 
                                    i.fa-regular.fa-comments
                                    span 575
                                  li 
                                    i.fa-regular.fa-paper-plane
                          // Root element of PhotoSwipe. Must have class pswp.
                          .pswp(tabindex='-1', role='dialog', aria-hidden='true')
                            //
                              Background of PhotoSwipe.
                              It's a separate element, as animating opacity is faster than rgba().
                            .pswp__bg
                            // Slides wrapper with overflow:hidden.
                            .pswp__scroll-wrap
                              // Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory.
                              // don't modify these 3 pswp__item elements, data is added later on.
                              .pswp__container
                                .pswp__item
                                .pswp__item
                                .pswp__item
                              // Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed.
                              .pswp__ui.pswp__ui--hidden
                                .pswp__top-bar
                                  // Controls are self-explanatory. Order can be changed.
                                  .pswp__counter
                                  button.pswp__button.pswp__button--close(title='Close (Esc)')
                                  button.pswp__button.pswp__button--share(title='Share')
                                  button.pswp__button.pswp__button--fs(title='Toggle fullscreen')
                                  button.pswp__button.pswp__button--zoom(title='Zoom in/out')
                                  // Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR
                                  // element will get class pswp__preloader-active when preloader is running
                                  .pswp__preloader
                                    .pswp__preloader__icn
                                      .pswp__preloader__cut
                                        .pswp__preloader__donut
                                .pswp__share-modal.pswp__share-modal--hidden.pswp__single-tap
                                  .pswp__share-tooltip
                                button.pswp__button.pswp__button--arrow--left(title='Previous (arrow left)')
                                button.pswp__button.pswp__button--arrow--right(title='Next (arrow right)')
                                .pswp__caption
                                  .pswp__caption__center
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
