.breadcrumb-bar {
    background-color: $light-200;
    padding: 108px 0 40px;
	position: relative;
	z-index: 1;
	overflow: hidden;
    @include respond-below(md) {
    	padding: 76px 0 20px;
    }
    .breadcrumb-title {
	    color: $title-color;
	    font-size: $font-size-36;
	    font-weight: $font_weight_bold;
	    @include respond-below(lg) {
	    	font-size: $font-size-30;
	    }
	    @include respond-below(md) {
	    	font-size: $font-size-24;
	    }
	}
	.page-breadcrumb {
		ol {
		    background-color: transparent;
		    font-size: $font-size-16;
			margin-bottom: 5px;
			justify-content: center;
		    li {
				color: $text-color;
		    	&.active {
		    		color:$title-color;
		    	}
		    	a {
		    		background: $primary_gradient;
					-webkit-background-clip: text; 
					-webkit-text-fill-color: transparent; 
					background-clip: text;
					color: transparent; 
		    	}
		    }
		}
		.breadcrumb-item + .breadcrumb-item {
			padding-left: 10px;
			&::before {
				color: $text-color;
				font-size: $font-size-14;
				content: "\f054";
				font-family: $font-awesome;
				padding-right: 10px;
			}
		}
	}
	.breadcrumb-bg {
		.breadcrumb-bg-01 {
			position: absolute;
			top: 56px;
			left: 0;
			z-index: -1;
			height: 165px;
		}
		.breadcrumb-bg-02 {
			position: absolute;
			top: 56px;
			right: 0;
			z-index: -1;
			height: 165px;
		}
		.breadcrumb-bg-03 {
			position: absolute;
			top: 56px;
			left: 30%;
			z-index: -1;
		}
		.breadcrumb-bg-04 {
			position: absolute;
			bottom: 0;
			right: 20%;
			z-index: -1;
		}
	}
}