.nav {
	--bs-nav-link-color: var(--bs-primary);
    --bs-nav-link-hover-color: var(--bs-primary-btn-hover-bg);
    --bs-nav-link-disabled-color: var(--bs-secondary);
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}   
.tab-content{
	margin-top: 0px;
}
.nav-pills{
    gap: 10px;
	
	@include respond('phone-land'){
		&.m-b50{
			margin-bottom: 30px;
		}
	}
}
.nav-pills-outline{
	.nav-link{
		font-weight: 500;
		color: var(--bs-secondary);
		border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
	}
}
.dz-tabs{
	.nav-tabs{
		border: 0;
		border-bottom: 1px solid #D7D7D7;
		
		.nav-link{
			width: 100%;
			padding: 12px 20px;
			text-align: start;
			font-size: 16px;
			font-weight: 500;
			border-radius: 0;
			background-color: transparent;
			border: 0;
			border-bottom: 3px solid transparent;
			color:var(--bs-secondary);
			box-shadow: unset;
			font-family: var(--font-family-title);
			
			@include respond('phone'){
				font-size: 14px;
			}
			.badge{
				color: var(--bs-heading-color);
				padding: 0 2px;
				border-radius: 20px;
				margin-#{$dz-pos-left}: 5px;
				width: 24px;
				height: 24px;
				line-height: 25px;
				@include respond('phone'){
					width: 20px;
					height: 20px;
					line-height: 22px;
				}
			}
			&.active{
				border-color:var(--bs-primary);
				color:var(--bs-primary);
				
				.badge{
					background: var(--bs-heading-color);
					color: #fff;
				}
			}
		}
		&.left{
			justify-content: $dz-pos-left;
		}	
		&.center{
			justify-content: center;
		}	
		&.right{
			justify-content: $dz-pos-right;			
		}
	}
	.tab-content{
		padding-top: 50px;
	}
	@include respond('tab-port'){
		.tab-content{
			padding-top: 30px;
		}	
	}
	@include respond('phone'){
		.tab-content{
			padding-top: 20px;
		}	
	}
	&.style-1{
		margin-bottom:40px;
		.nav-tabs {
			border: none;
			display: flex;
			gap: 20px;
			margin-#{$dz-pos-right}: -20px;
			.nav-link {
				max-width: calc(33.33% - 20px);
				flex: 0 0 calc(33.33% - 20px);
				cursor: pointer;
				padding: 15px 30px;
				font-size: 20px;
				text-align: start;
				font-weight: 400;
				background: transparent;
				color: var(--bs-secondary);
				border: 1px solid var(--bs-secondary);
				font-family: var(--font-family-title);
				display: flex;
				align-items: center;
				border-radius: 10px;
				&.active,
				&:hover,
				&:active,
				&:focus{
					border-color:var(--bs-primary);
				}
				i,
				svg{
					font-size: 24px;
					color: var(--bs-secondary);
					margin-#{$dz-pos-right}:10px;
				}
			}
		}
		&.tab-space{
			margin-bottom:75px;
			margin-top:35px;
		}
		@include respond('wide-desktop'){
			.nav-tabs{
				.nav-link {
					padding: 15px 20px;
				}
			}
		}
		@include respond('laptop'){
			.nav-tabs{
				.nav-link {
					max-width:calc(50% - 20px);
					flex: 0 0 calc(50% - 20px);
				}
			}
		}
		@include respond('laptop'){
			.nav-tabs{
				.nav-link {
					max-width:calc(50% - 20px);
					flex: 0 0 calc(50% - 20px);
				}
			}
		}
		@include respond('tab-port'){
			&.tab-space{
				margin-bottom:0px;
				margin-top:0px;
			}
			.nav-tabs{
				.nav-link {
					max-width:calc(33.33% - 20px);
					flex: 0 0 calc(33.33% - 20px);
				}
			}
		}
		@include respond('phone-land'){
			.nav-tabs{
				.nav-link {
					max-width:calc(50% - 20px);
					flex: 0 0 calc(50% - 20px);
				}
			}
		}
		@include respond('phone'){
			.nav-tabs {
				gap: 15px;
				margin-#{$dz-pos-right}: -15px;
				.nav-link {
					max-width: calc(33.33% - 15px);
					flex: 0 0 calc(33.33% - 15px);
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					padding: 12px 0;
					font-size: 16px;
					gap: 5px;
					svg{
						margin-#{$dz-pos-right}:0;
					}
				}
			}
		}
	}
	&.style-2{
		.nav-pills{
			width: 100%;
			padding: 0;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: 5px;
			text-align: center;
			margin-bottom: 10px;

			.nav-item{
				display: inline-block;
				flex: auto;
				
				.nav-link{
					background-color: #fff;
					color: #000;
					padding: 15px 25px;
					font-size: 15px;	
					font-weight: 400;
					border-radius: 10px;
					transition: 0.5s;
					
					&:hover,
					&.active{
						background-color: #000;
						color: #fff;
					}
				}
			}
		}
		&.nav-full{
			@include respond('tab-port-min'){
				.nav-pills{
					display: block;
					
					.nav-item{
						display: block;
						margin-bottom: 5px;
					}
				}				
			}		
		}
	}
}