How can I create a curvy transparent circle inside a div

Question

I need to create a curvy footer. the background has to be like the picture below, but I couldn't create that transparent circular hole in my div. I tried to use the svg as the background but in bigger screens it stretches and doesn't look good. is it any possible way to create it with pseudo elements? or any other solution?

my current implementation looks like this picture. I could make the upper curves with ::before and ::after.

here's my code for this component:

<div class="home-page-footer">
<div class="footer-item" (click)="onMenuClick(MenuItems.Home)">
  <div class="item-icon">
    <img *ngIf="(currentMenu === MenuItems.Home || currentMenu === MenuItems.Home1)" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMSAyMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjEgMjM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMzNjQ4RDE7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMi45LDE1LjN2Ny4ySDguMXYtNy4yYzAsMCwwLTAuMSwwLTAuMWMwLDAsMC0wLjEsMC0wLjFjMCwwLDAsMCwwLjEsMGMwLDAsMC4xLDAsMC4xLDBoNC40DQoJYzAuMSwwLDAuMSwwLDAuMiwwLjFDMTIuOSwxNS4yLDEyLjksMTUuMiwxMi45LDE1LjN6Ii8+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjAuNSw5LjV2MTBjMCwwLjgtMC4zLDEuNi0wLjksMi4xYy0wLjYsMC42LTEuMywwLjktMi4xLDAuOWgtMi42di03LjJjMC0wLjYtMC4yLTEuMi0wLjctMS42DQoJYy0wLjQtMC40LTEtMC43LTEuNi0wLjdIOC4zYy0wLjYsMC0xLjIsMC4yLTEuNiwwLjdjLTAuNCwwLjQtMC43LDEtMC43LDEuNnY3LjJIMy41Yy0wLjgsMC0xLjYtMC4zLTIuMS0wLjkNCgljLTAuNi0wLjYtMC45LTEuMy0wLjktMi4xdi0xMGMwLTAuNSwwLjEtMC45LDAuMy0xLjNjMC4yLTAuNCwwLjUtMC44LDAuOS0xbDguMi02LjRjMC4yLTAuMSwwLjQtMC4yLDAuNi0wLjJjMC4yLDAsMC40LDAuMSwwLjYsMC4yDQoJbDguMiw2LjRjMC40LDAuMywwLjcsMC42LDAuOSwxQzIwLjQsOC42LDIwLjUsOSwyMC41LDkuNXoiLz4NCjwvc3ZnPg0K">
    <img *ngIf="!(currentMenu === MenuItems.Home || currentMenu === MenuItems.Home1)" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMCAyMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiNDNEM0QzQ7c3Ryb2tlLXdpZHRoOjEuNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xLjgsNy40TDEwLDFsOC4yLDYuNGMwLjIsMC4yLDAuNCwwLjQsMC42LDAuN0MxOC45LDguNCwxOSw4LjcsMTksOXYxMGMwLDAuNS0wLjIsMS0wLjYsMS40DQoJQzE4LjEsMjAuOCwxNy41LDIxLDE3LDIxSDNjLTAuNSwwLTEtMC4yLTEuNC0wLjZDMS4yLDIwLDEsMTkuNSwxLDE5VjljMC0wLjMsMC4xLTAuNiwwLjItMC45QzEuMyw3LjgsMS41LDcuNiwxLjgsNy40TDEuOCw3LjR6Ii8+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNi42LDIwLjd2LTYuOWMwLTAuMywwLjEtMC42LDAuNC0wLjljMC4yLTAuMiwwLjUtMC40LDAuOS0wLjRoNC40YzAuMiwwLDAuMywwLDAuNSwwLjENCgljMC4xLDAuMSwwLjMsMC4yLDAuNCwwLjNjMC4xLDAuMSwwLjIsMC4yLDAuMywwLjRjMC4xLDAuMSwwLjEsMC4zLDAuMSwwLjV2Ni45Ii8+DQo8L3N2Zz4NCg==" alt="">
  </div>
  <span>خانه</span>
</div>

<div class="footer-item" (click)="onMenuClick(MenuItems.MyQr)">
  <div class="item-icon">
    <img *ngIf="currentMenu === MenuItems.MyQr" src="/assets/ui-svg/home-design/active-my-qr.svg" alt="">
    <img *ngIf="currentMenu !== MenuItems.MyQr" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNS41IDI1LjEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1LjUgMjUuMTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I0I2QjhDMDt9DQoJLnN0MXtmaWxsOiMxMDc2RkY7fQ0KPC9zdHlsZT4NCjxnIGlkPSJHcm91cF8zMzg4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC41KSI+DQoJPHBhdGggaWQ9IlBhdGhfMTc1MDQiIGNsYXNzPSJzdDAiIGQ9Ik0xOS41LDEzLjVoLTUuM2MtMC4yLDAtMC4yLDAtMC4yLDAuMnYxMC42YzAsMC4yLDAsMC4yLDAuMiwwLjJjMi43LDAsNS40LDAsOC4xLDANCgkJYzEuMywwLDIuNC0wLjksMi43LTIuMWMwLjEtMC4yLDAuMS0wLjQsMC4xLTAuNmMwLTIuNywwLTUuNCwwLTguMmMwLTAuMi0wLjEtMC4yLTAuMi0wLjJMMTkuNSwxMy41TDE5LjUsMTMuNXogTTE5LjQsMTUuNmgzLjMNCgkJYzAuMSwwLDAuMiwwLDAuMiwwLjJ2Ni4xYzAsMC40LTAuMywwLjctMC43LDAuN2MwLDAsMCwwLTAuMSwwaC02Yy0wLjIsMC0wLjIsMC0wLjItMC4ydi02LjVjMC0wLjIsMC0wLjIsMC4yLTAuMkgxOS40eiIvPg0KCTxwYXRoIGlkPSJQYXRoXzE3NTA1IiBjbGFzcz0ic3QwIiBkPSJNNS41LDEwLjdoNS4zYzAuMiwwLDAuMiwwLDAuMi0wLjJWMC4zYzAtMC4yLDAtMC4zLDAtMC41YzAtMC4xLDAtMC4yLTAuMi0wLjJIMi44DQoJCWMtMS4zLDAtMi40LDAuOS0yLjcsMi4xQzAsMS45LDAsMi4yLDAsMi40YzAsMi43LDAsNS40LDAsOC4xYzAsMC4yLDAsMC4yLDAuMiwwLjJDMiwxMC43LDMuOCwxMC43LDUuNSwxMC43TDUuNSwxMC43eiBNNS41LDguNw0KCQlIMi4zYy0wLjIsMC0wLjIsMC0wLjItMC4yYzAtMiwwLTQsMC02LjFjMC0wLjEsMC0wLjIsMC0wLjJjMC4xLTAuMywwLjQtMC41LDAuNy0wLjVoNkM5LDEuNyw5LDEuNyw5LDEuOWMwLDIuMiwwLDQuNCwwLDYuNQ0KCQljMCwwLjIsMCwwLjItMC4yLDAuMkw1LjUsOC43eiIvPg0KCTxwYXRoIGlkPSJQYXRoXzE3NTA2IiBjbGFzcz0ic3QwIiBkPSJNMTEuMSwxOS4xdi01LjNjMC0wLjIsMC0wLjItMC4yLTAuMkgwLjJjLTAuMSwwLTAuMiwwLTAuMiwwLjJjMCwyLjcsMCw1LjQsMCw4LjENCgkJYzAsMS4zLDAuOSwyLjQsMi4xLDIuN2MwLjIsMC4xLDAuNCwwLjEsMC43LDAuMWMyLjcsMCw1LjQsMCw4LjEsMGMwLjEsMCwwLjIsMCwwLjItMC4yQzExLjEsMjIuNiwxMS4xLDIwLjgsMTEuMSwxOS4xTDExLjEsMTkuMXoNCgkJIE05LDE5djMuM2MwLDAuMiwwLDAuMi0wLjIsMC4yaC02Yy0wLjQsMC0wLjctMC4yLTAuOC0wLjZjMC0wLjEsMC0wLjEsMC0wLjJ2LTZjMC0wLjIsMC0wLjIsMC4yLTAuMmg2LjVjMC4yLDAsMC4yLDAuMSwwLjIsMC4yDQoJCUM5LDE2LjksOSwxOCw5LDE5eiIvPg0KCTxwYXRoIGlkPSJVbmlvbl85NyIgY2xhc3M9InN0MCIgZD0iTTI0LjgsMTAuN2MtMC42LDAtMS4xLDAtMS43LDBjLTAuMSwwLTAuMiwwLTAuMi0wLjJjMC0wLjYsMC0xLjIsMC0xLjlWNi43YzAtMC4xLDAtMC4yLDAuMi0wLjINCgkJYzAuNiwwLDEuMSwwLDEuNywwYzAuMSwwLDAuMiwwLDAuMiwwLjJjMCwxLjMsMCwyLjUsMCwzLjhDMjUsMTAuNywyNC45LDEwLjcsMjQuOCwxMC43TDI0LjgsMTAuN3ogTTEzLjksMTAuNVY2LjgNCgkJYzAtMC4xLDAuMS0wLjIsMC4yLTAuMmMwLjYsMCwxLjEsMCwxLjcsMGMwLjEsMCwwLjIsMCwwLjIsMC4yYzAsMC42LDAsMS4xLDAsMS43YzAsMC4yLDAsMC4yLDAuMiwwLjJoNC41YzAuMSwwLDAuMiwwLDAuMiwwLjINCgkJYzAsMC42LDAsMS4xLDAsMS43YzAsMC4xLDAsMC4yLTAuMiwwLjJoLTYuNkMxMy45LDEwLjcsMTMuOSwxMC42LDEzLjksMTAuNXogTTIwLjYsNi41Yy0wLjgsMC0xLjYsMC0yLjQsMGMtMC4xLDAtMC4yLDAtMC4yLTAuMg0KCQljMC0wLjgsMC0xLjYsMC0yLjRjMC0wLjEsMC0wLjIsMC4yLTAuMmMwLjgsMCwxLjYsMCwyLjQsMGMwLjEsMCwwLjIsMCwwLjIsMC4yYzAsMC40LDAsMC44LDAsMS4yczAsMC44LDAsMS4yDQoJCUMyMC44LDYuNSwyMC44LDYuNSwyMC42LDYuNUwyMC42LDYuNXogTTE1LjgsMy44Yy0wLjYsMC0xLjEsMC0xLjcsMGMtMC4xLDAtMC4yLTAuMS0wLjItMC4yYzAtMC42LDAtMS4yLDAtMS45di0xLjkNCgkJYzAtMC4xLDAtMC4yLDAuMi0wLjJjMC42LDAsMS4yLDAsMS43LDBjMC4xLDAsMC4yLDAsMC4yLDAuMnYzLjhDMTUuOSwzLjcsMTUuOSwzLjgsMTUuOCwzLjhMMTUuOCwzLjh6IE0yMi45LDMuNg0KCQljMC0wLjQsMC0wLjgsMC0xLjJjMC0wLjQtMC4zLTAuOC0wLjctMC44YzAsMCwwLDAsMCwwYy0xLjMsMC0yLjYsMC0zLjksMGMtMC4yLDAtMC4yLDAtMC4yLTAuMmMwLTAuNiwwLTEuMSwwLTEuNw0KCQljMC0wLjEsMC0wLjIsMC4yLTAuMmMwLjcsMCwxLjQsMCwyLDBoMS44YzAuNCwwLDAuOCwwLjEsMS4xLDAuMmMwLjksMC4zLDEuNiwxLjEsMS43LDIuMUMyNSwyLjUsMjUsMy4xLDI1LDMuNg0KCQljMCwwLjEtMC4xLDAuMS0wLjEsMC4xaC0xLjhDMjMsMy44LDIyLjksMy43LDIyLjksMy42eiIvPg0KCTxwYXRoIGlkPSJQYXRoXzE3NTEyIiBjbGFzcz0ic3QxIiBkPSJNNS41LDMuOGgxLjJjMC4xLDAsMC4yLDAsMC4yLDAuMmMwLDAuOCwwLDEuNiwwLDIuNGMwLDAuMSwwLDAuMi0wLjIsMC4yYy0wLjgsMC0xLjYsMC0yLjQsMA0KCQljLTAuMSwwLTAuMiwwLTAuMi0wLjJjMC0wLjgsMC0xLjYsMC0yLjRjMC0wLjEsMC0wLjIsMC4yLTAuMkM0LjcsMy44LDUuMSwzLjgsNS41LDMuOHoiLz4NCgk8cGF0aCBpZD0iUGF0aF8xNzUxMyIgY2xhc3M9InN0MCIgZD0iTTIwLjgsMTl2LTEuMmMwLTAuMSwwLTAuMi0wLjItMC4yYy0wLjgsMC0xLjYsMC0yLjQsMGMtMC4xLDAtMC4yLDAtMC4yLDAuMg0KCQljMCwwLjgsMCwxLjYsMCwyLjRjMCwwLjEsMCwwLjIsMC4yLDAuMmMwLjgsMCwxLjYsMCwyLjQsMGMwLjEsMCwwLjItMC4xLDAuMi0wLjJDMjAuOCwxOS44LDIwLjgsMTkuNCwyMC44LDE5TDIwLjgsMTl6Ii8+DQoJPHBhdGggaWQ9IlBhdGhfMTc1MTQiIGNsYXNzPSJzdDAiIGQ9Ik01LjUsMy44SDQuM2MtMC4xLDAtMC4yLDAtMC4yLDAuMmMwLDAuOCwwLDEuNiwwLDIuNGMwLDAuMSwwLDAuMiwwLjIsMC4yYzAuOCwwLDEuNiwwLDIuNCwwDQoJCWMwLjEsMCwwLjIsMCwwLjItMC4yYzAtMC44LDAtMS42LDAtMi40YzAtMC4xLDAtMC4yLTAuMi0wLjJDNi4zLDMuOCw1LjksMy44LDUuNSwzLjh6Ii8+DQoJPHBhdGggaWQ9IlBhdGhfMTc1MTUiIGNsYXNzPSJzdDAiIGQ9Ik00LjIsMTkuMXYxLjJjMCwwLjEsMCwwLjIsMC4yLDAuMmMwLjgsMCwxLjYsMCwyLjQsMGMwLjEsMCwwLjIsMCwwLjItMC4yYzAtMC44LDAtMS42LDAtMi40DQoJCWMwLTAuMS0wLjEtMC4yLTAuMi0wLjJjLTAuOCwwLTEuNiwwLTIuNCwwYy0wLjEsMC0wLjIsMC0wLjIsMC4yQzQuMiwxOC4zLDQuMiwxOC43LDQuMiwxOS4xTDQuMiwxOS4xeiIvPg0KPC9nPg0KPC9zdmc+DQo=" alt="">
  </div>
  <span>QR من</span>
</div>

<div class="footer-item scan" (click)="onMenuClick(MenuItems.ScanQr)">
    <div [ngClass]="{'scan-qr' : !topServicesBoxExpanded}" class="item-icon">
      <img *ngIf="!topServicesBoxExpanded" src="../../../assets/ui-svg/home-design/scan-qr-white.svg">
      <img *ngIf="topServicesBoxExpanded" src="../../../assets/ui-svg/home-design/scan-qr.svg">
    </div>
    <span>اسکن</span>
</div>


<div class="footer-item" (click)="onMenuClick(MenuItems.Transactions)">
  <div class="item-icon">
    <img *ngIf="currentMenu === MenuItems.Transactions" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMSAyMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjEgMjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMzNjQ4RDE7fQ0KCS5zdDF7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojMzY0OEQxO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTcuMiwyMS45SDMuNmMtMC4yLDAtMC40LDAtMC42LTAuMWMtMC42LTAuMS0xLjItMC40LTEuNi0wLjhjLTAuMS0wLjEtMC4zLTAuMy0wLjQtMC40DQoJYy0wLjMtMC4zLTAuNC0wLjctMC41LTEuMWMwLTAuMi0wLjEtMC40LTAuMS0wLjZWMy4yYzAtMC44LDAuNC0xLjYsMS0yLjJjMC42LTAuNiwxLjQtMC45LDIuMi0wLjloMTMuN2MwLjgsMCwxLjcsMC4zLDIuMywwLjgNCgljMC42LDAuNiwxLDEuNCwxLDIuMnYxNS43YzAsMC42LTAuMiwxLjMtMC42LDEuOGMtMC4xLDAuMi0wLjMsMC4zLTAuNCwwLjVjLTAuNSwwLjQtMSwwLjctMS42LDAuOEMxNy43LDIxLjksMTcuNCwyMS45LDE3LjIsMjEuOQ0KCUwxNy4yLDIxLjl6IE0zLjUsMS44Yy0wLjQsMC0wLjgsMC4xLTEsMC40UzIsMi44LDIsMy4ydjE1LjZjMCwwLjMsMC4xLDAuNSwwLjIsMC43YzAuMSwwLjEsMC4xLDAuMSwwLjIsMC4yDQoJYzAuMiwwLjIsMC41LDAuMywwLjgsMC40YzAuMSwwLDAuMiwwLDAuMywwaDEzLjZjMC4xLDAsMC4yLDAsMC4zLDBjMC4zLTAuMSwwLjYtMC4yLDAuOC0wLjRjMC4xLTAuMSwwLjEtMC4xLDAuMi0wLjINCgljMC4yLTAuMiwwLjItMC41LDAuMy0wLjdWMy4yYzAtMC40LTAuMi0wLjctMC41LTFzLTAuNy0wLjQtMS4xLTAuNEwzLjUsMS44TDMuNSwxLjh6Ii8+DQo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTkuMywxLjFoLTE4djIwaDE4VjEuMXogTTEwLDcuNGg0LjVjMC4yLDAsMC40LTAuMSwwLjYtMC4yYzAuMi0wLjIsMC4yLTAuNCwwLjItMC42cy0wLjEtMC40LTAuMi0wLjYNCgljLTAuMi0wLjItMC40LTAuMi0wLjYtMC4ySDEwYy0wLjIsMC0wLjQsMC4xLTAuNiwwLjJDOS4yLDYuMSw5LjEsNi4zLDkuMSw2LjVTOS4yLDcsOS40LDcuMUM5LjUsNy4zLDkuOCw3LjQsMTAsNy40eiBNMTQuNSwxMS45DQoJSDYuM2MtMC4yLDAtMC40LTAuMS0wLjYtMC4yYy0wLjItMC4yLTAuMi0wLjQtMC4yLTAuNmMwLTAuMiwwLjEtMC40LDAuMi0wLjZjMC4yLTAuMiwwLjQtMC4yLDAuNi0wLjJoOC4yYzAuMiwwLDAuNCwwLjEsMC42LDAuMg0KCXMwLjIsMC40LDAuMiwwLjZjMCwwLjItMC4xLDAuNC0wLjIsMC42UzE0LjcsMTEuOSwxNC41LDExLjl6IE02LjMsMTYuM2g4LjJjMC4yLDAsMC40LTAuMSwwLjYtMC4yYzAuMi0wLjIsMC4yLTAuNCwwLjItMC42DQoJYzAtMC4yLTAuMS0wLjQtMC4yLTAuNnMtMC40LTAuMi0wLjYtMC4ySDYuM2MtMC4yLDAtMC40LDAuMS0wLjYsMC4yYy0wLjIsMC4yLTAuMiwwLjQtMC4yLDAuNmMwLDAuMiwwLjEsMC40LDAuMiwwLjYNCglDNS44LDE2LjIsNi4xLDE2LjMsNi4zLDE2LjN6Ii8+DQo8L3N2Zz4NCg==" alt="">
    <img *ngIf="currentMenu !== MenuItems.Transactions" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMSAyMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjEgMjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNDNEM0QzQ7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNy4zLDIxLjhIMy43Yy0wLjIsMC0wLjQsMC0wLjYtMC4xYy0wLjYtMC4xLTEuMi0wLjQtMS42LTAuOGMtMC4xLTAuMS0wLjMtMC4zLTAuNC0wLjQNCgljLTAuMy0wLjMtMC40LTAuNy0wLjUtMS4xYzAtMC4yLTAuMS0wLjQtMC4xLTAuNlYzLjFjMC0wLjgsMC40LTEuNiwxLTIuMkMyLDAuMywyLjgsMCwzLjYsMGgxMy43YzAuOCwwLDEuNywwLjMsMi4zLDAuOA0KCWMwLjYsMC42LDEsMS40LDEsMi4ydjE1LjdjMCwwLjYtMC4yLDEuMy0wLjYsMS44Yy0wLjEsMC4yLTAuMywwLjMtMC40LDAuNWMtMC41LDAuNC0xLDAuNy0xLjYsMC44QzE3LjgsMjEuOCwxNy41LDIxLjgsMTcuMywyMS44eg0KCSBNMy42LDEuN2MtMC40LDAtMC44LDAuMS0xLDAuNHMtMC41LDAuNi0wLjUsMXYxNS42YzAsMC4zLDAuMSwwLjUsMC4yLDAuN2MwLjEsMC4xLDAuMSwwLjEsMC4yLDAuMkMyLjgsMTkuOSwzLDIwLDMuMywyMC4xDQoJYzAuMSwwLDAuMiwwLDAuMywwaDEzLjZjMC4xLDAsMC4yLDAsMC4zLDBjMC4zLTAuMSwwLjYtMC4yLDAuOC0wLjRjMC4xLTAuMSwwLjEtMC4xLDAuMi0wLjJjMC4yLTAuMiwwLjItMC41LDAuMy0wLjdWMy4xDQoJYzAtMC40LTAuMi0wLjctMC41LTFzLTAuNy0wLjQtMS4xLTAuNEwzLjYsMS43TDMuNiwxLjd6Ii8+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTQuNiw3LjNoLTQuNUM5LjksNy4zLDkuNiw3LjIsOS41LDdDOS4zLDYuOSw5LjIsNi43LDkuMiw2LjRTOS4zLDYsOS41LDUuOGMwLjItMC4yLDAuNC0wLjIsMC42LTAuMmg0LjUNCgljMC4yLDAsMC40LDAuMSwwLjYsMC4yYzAuMiwwLjIsMC4yLDAuNCwwLjIsMC42UzE1LjQsNi45LDE1LjIsN0MxNS4xLDcuMiwxNC44LDcuMywxNC42LDcuM3oiLz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNC42LDExLjhINi40Yy0wLjIsMC0wLjQtMC4xLTAuNi0wLjJjLTAuMi0wLjItMC4yLTAuNC0wLjItMC42YzAtMC4yLDAuMS0wLjQsMC4yLTAuNg0KCWMwLjItMC4yLDAuNC0wLjIsMC42LTAuMmg4LjJjMC4yLDAsMC40LDAuMSwwLjYsMC4yczAuMiwwLjQsMC4yLDAuNmMwLDAuMi0wLjEsMC40LTAuMiwwLjZTMTQuOCwxMS44LDE0LjYsMTEuOHoiLz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNC42LDE2LjJINi40Yy0wLjIsMC0wLjQtMC4xLTAuNi0wLjJjLTAuMi0wLjItMC4yLTAuNC0wLjItMC42YzAtMC4yLDAuMS0wLjQsMC4yLTAuNg0KCWMwLjItMC4yLDAuNC0wLjIsMC42LTAuMmg4LjJjMC4yLDAsMC40LDAuMSwwLjYsMC4yczAuMiwwLjQsMC4yLDAuNmMwLDAuMi0wLjEsMC40LTAuMiwwLjZTMTQuOCwxNi4yLDE0LjYsMTYuMnoiLz4NCjwvc3ZnPg0K" alt="">
  </div>
  <span>تراکنش ها</span>
</div>

<div class="footer-item" (click)="onMenuClick(MenuItems.UserProfile)">
  <div class="item-icon">
    <div class="footer-badge"  *ngIf="unreadMessagesCount">
      {{unreadMessagesCount}}
    </div>
    <img *ngIf="currentMenu === MenuItems.UserProfile" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMyAyMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjMgMjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiMzNjQ4RDE7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO30NCgkuc3Qxe2ZpbGw6IzM2NDhEMTtzdHJva2U6IzM2NDhEMTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fQ0KCS5zdDJ7ZmlsbDojMzY0OEQxO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMi41LDE1LjZjLTAuOC0xLjUtMS4yLTMuMi0xLjEtNUMxLjUsOSwyLDcuMywyLjksNS44YzAuOS0xLjUsMi4yLTIuNywzLjctMy41QzguMSwxLjUsOS44LDEsMTEuNSwxDQoJYzEuNywwLDMuNCwwLjQsNC45LDEuM3MyLjgsMi4xLDMuNywzLjVjMC45LDEuNSwxLjQsMy4xLDEuNSw0LjljMC4xLDEuNy0wLjMsMy40LTEuMSw1Ii8+DQo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTEuNSwxMi4yYzEuNywwLDMtMS4zLDMtM2MwLTEuNy0xLjMtMy0zLTNjLTEuNywwLTMsMS4zLTMsM0M4LjUsMTAuOSw5LjgsMTIuMiwxMS41LDEyLjJ6Ii8+DQo8cGF0aCBjbGFzcz0ic3QyIiBkPSJNMTkuNCwxOC42Yy02LjMsNi4xLTEzLjMsMi41LTE1LjksMGMtMC4zLTAuMy0wLjMtMC45LDAtMS4yYzQuNC00LjUsMTIuNi0zLjQsMTUuOSwwDQoJQzE5LjcsMTcuOCwxOS43LDE4LjMsMTkuNCwxOC42eiIvPg0KPC9zdmc+DQo=" alt="">
    <img *ngIf="currentMenu !== MenuItems.UserProfile" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMyAyMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjMgMjM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNDNEM0QzQ7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00LjQsMjAuMkM0LjQsMjAuMSw0LjQsMjAuMSw0LjQsMjAuMmMtMS44LTEuNi0zLjEtMy41LTMuNy01LjdTMC4zLDkuOSwxLjEsNy44YzAuOC0yLjEsMi4yLTQsNC4xLTUuMw0KCWMxLjktMS4zLDQuMS0yLDYuNC0yYzIuMywwLDQuNSwwLjcsNi40LDJjMS45LDEuMywzLjMsMy4yLDQuMSw1LjNjMC44LDIuMSwwLjksNC41LDAuMyw2LjdzLTEuOCw0LjItMy42LDUuNmMwLDAtMC4xLDAuMS0wLjEsMC4xDQoJYy0yLDEuNi00LjUsMi41LTcuMSwyLjVDOC45LDIyLjcsNi40LDIxLjgsNC40LDIwLjJMNC40LDIwLjJ6IE0xMS41LDIxYzIsMCwzLjktMC42LDUuNS0xLjhsLTAuMi0wLjRjLTAuMi0wLjQtMC40LTAuNy0wLjctMQ0KCUMxNS43LDE3LjMsMTUsMTcsMTQuNCwxN0g4LjZjLTAuNiwwLTEuMywwLjItMS43LDAuN2wtMC4xLDAuMWMtMC4zLDAuMy0wLjUsMC42LTAuNywxTDYsMTkuMkM3LjYsMjAuNCw5LjUsMjEsMTEuNSwyMXogTTIuMSwxMS42DQoJQzIuMSwxNCwzLDE2LjMsNC42LDE4YzAuMi0wLjYsMC42LTEuMSwxLjEtMS41bDAuMS0wLjFjMC44LTAuNywxLjgtMS4xLDIuOS0xLjFoNS43YzEuMSwwLDIuMSwwLjQsMi45LDEuMWMwLjUsMC40LDAuOSwxLDEuMSwxLjYNCgljMS0xLjEsMS44LTIuNSwyLjItNHMwLjQtMywwLjEtNC41Yy0wLjMtMS41LTEtMi45LTItNGMtMS0xLjItMi4zLTIuMS0zLjctMi42cy0zLTAuOC00LjUtMC42Yy0xLjUsMC4yLTMsMC43LTQuMiwxLjZzLTIuMywyLTMsMy40DQoJQzIuNSw4LjYsMi4xLDEwLjEsMi4xLDExLjZ6IE02LjcsOS4yYzAtMSwwLjMtMS45LDAuOC0yLjdDOCw1LjcsOC44LDUuMSw5LjcsNC44YzAuOS0wLjQsMS45LTAuNSwyLjgtMC4zYzAuOSwwLjIsMS44LDAuNiwyLjUsMS4zDQoJYzAuNywwLjcsMS4xLDEuNSwxLjMsMi41YzAuMiwwLjksMC4xLDEuOS0wLjMsMi44Yy0wLjQsMC45LTEsMS42LTEuOCwyLjJjLTAuOCwwLjUtMS43LDAuOC0yLjcsMC44Yy0xLjMsMC0yLjUtMC41LTMuNC0xLjQNCglDNy4yLDExLjcsNi43LDEwLjUsNi43LDkuMnogTTguNCw5LjJjMCwwLjYsMC4yLDEuMiwwLjUsMS43YzAuMywwLjUsMC44LDAuOSwxLjQsMS4yYzAuNiwwLjIsMS4yLDAuMywxLjgsMC4yDQoJYzAuNi0wLjEsMS4yLTAuNCwxLjYtMC45YzAuNC0wLjQsMC43LTEsMC45LTEuNmMwLjEtMC42LDAuMS0xLjItMC4yLTEuOGMtMC4yLTAuNi0wLjYtMS4xLTEuMi0xLjRjLTAuNS0wLjMtMS4xLTAuNS0xLjctMC41DQoJYy0wLjgsMC0xLjYsMC4zLTIuMiwwLjlTOC40LDguNCw4LjQsOS4yTDguNCw5LjJ6Ii8+DQo8L3N2Zz4NCg==" alt="">
  </div>
  <div>
    <span class="footer-span">پروفایل</span>
  </div>
</div>

.home-page-footer {
  position: relative;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.078));
  background-color: transparent;
  font-family: $default_font_family;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  height: 54px;
  box-sizing: border-box;
  position: fixed;
  bottom: -1px;
  width: 100%;
  max-width: 850px;
  &::before{
    content: '';
    position: absolute;
    top: -15px;
    right: 0;
    width: calc( 40% + (10% - 25px));;
    height: 20px;
    background-color: white;
    border-top-left-radius: 20px;
    border-top-right-radius: 65%;
  }
  &::after{
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    width: calc( 40% + (10% - 25px));
    height: 20px;
    background-color: white;
    border-top-right-radius: 20px;
    border-top-left-radius: 65%;
  }

  span {
      color: var(--color10);
      font-size: 12px;
      font-weight: 500;
    }

    .footer-item {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      justify-content: flex-end;
      position: relative;
      background-color:white;
      box-sizing: border-box;
      padding-bottom: 5px;
      .item-icon{
        height: 20px;
        width: 20px;
        margin-bottom: 2px;
        background-color: transparent;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        img{
          height: 20px;
        }
        transition: all 1s ease;
        &.scan-qr{
          position: relative;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: var(--color01);
          box-shadow: 0px 1px 10px rgba(16, 12, 183, 0.3);
          margin-top: -20px;
          z-index: 1;
        }
      }
    }
}

.footer-item.scan{
  background-color: transparent !important;
  position: relative;
  &::before{
    content: '';
    position: absolute;
    background-color: white;
    width: 50%;
    height: calc(100% - 5px);
    bottom: 0;
    right: 0;
    z-index: -1;
  }
  &::after{
    content: '';
    position: absolute;
    background-color: white;
    width: 50%;
    height: calc(100% - 5px);
    bottom: 0;
    left: 0;
    z-index: -1;
  }
}


.footer-badge{
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--color12) ;
  top: -10px;
  right: -8px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 2px;
  font-size: 10px;
}


.lfooter{
  padding: 0 0 0 0 !important;
}