.navbar {
  	width: 100%;
  	height: 80px;
  	position: fixed;
    bottom: 20px;
  	border-radius: 60px;
	border: 1px solid var(--Gradient-Surface-Glass, #FFF);
  	background: var(--Colors-Semantics-Background-Glass-Surface);
	backdrop-filter: blur(5px); /* Apply blur effect */
  	box-sizing: border-box;
  	overflow: hidden;
  	display: flex;
  	align-items: center;
    justify-content: center;
  	padding: 4px;
  	gap: 10px;
  	text-align: left;
	z-index: 100;
}
@media (min-width: 1100px) {
	.navbar {
		display: none;
	}
}
.navbar .tab {
	height: 72px;
	flex: 1;
	border-radius: 60px;
	background: transparent;
    position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 50px;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
.navbar .tab[status="is-active"] {
   	background: var(--Gradient-Action-Accent);
}
.navbar .tab-content {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	flex-shrink: 0;
}
.navbar .icon {
  	font-size: 23px;
  	height: 24px;
	padding-bottom: 5px;
}
.navbar .label, .navbar .icon {
	background: var(--Gradient-Action-Accent-Gradient, linear-gradient(180deg, #AE3F97 0%, #82107B 100%));
	background-clip: text;
	-webkit-background-clip: text;
    color: transparent;
	-webkit-text-fill-color: transparent;
}

.navbar .tab[status="is-active"] .label, .navbar .tab[status="is-active"] .icon {
    background: var(--Gradient-Surface-Soft-Depth);
	background-clip: text;
	-webkit-background-clip: text;
}

.icon-navbar-item-1:before{content:'\0052';}
.icon-navbar-item-2:before{content:'\0042';}
.icon-navbar-item-3:before{content:'\0058';}