@use "../utils" as *;

/*----------------------------------------*/
/*  2.6 Breadcrumb
/*----------------------------------------*/

.rs-breadcrumb{
	&-one{
		padding-top: 170px;
		padding-bottom: 170px;
		@media #{$lg}{
			padding-top: 140px;
  			padding-bottom: 140px;
		}
		@media #{$sm}{
			padding-top: 120px;
  			padding-bottom: 120px;
		}
		.rs-breadcrumb-bg{
			&.bg-black{
			 display: none;
			}
		 }
		.rs-breadcrumb-bg{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			z-index: -1;
			@media #{$xs}{
				background-position: center left;
			}
		}
		.rs-breadcrumb-title{
			font-size: 55px;
			margin-bottom: 15px;
			color: var(--rs-white);
			@media #{$md}{
				font-size: 50px;
			}
			@media #{$xs}{
				font-size: 40px;
			}
			@media #{$mobile}{
				font-size: 35px;
			}
		}
		.rs-breadcrumb-menu{
			ul{
				display: inline-flex;
				gap: 15px 35px;
				justify-content: center;
				flex-wrap: wrap;
				li{
					list-style: none;
					position: relative;
					&:not(:last-child){
						&::before{
							content: "\ea6e";
							position: absolute;
							font-family: remixicon !important;
							font-size: 20px;
							inset-inline-end: -28px;
							opacity: 1;
							color: var(--rs-white);
						}
					}
					span{
						color: var(--rs-white);
						a{
							&:hover{
								color: var(--rs-black);
							}
						}
					}
				}
			}
		}
	}
}
