@use "../utils" as *;

/*----------------------------------------*/
/*  2.5 Breadcrumb
/*----------------------------------------*/

.rs-breadcrumb {
	&-one {
		padding-top: 190px;
		padding-bottom: 115px;
		position: relative;
		z-index: 1;
		padding-inline: 150px;
		@media #{$laptop}{
			padding-inline: 15px;
		}
		@media #{$lg}{
			padding-top: 170px;
  			padding-bottom: 95px;
		}
		@media #{$md}{
			padding-top: 150px;
  			padding-bottom: 75px;
		}
		@media #{$xs}{
			padding-top: 135px;
		}
		.rs-breadcrumb-shape{
			position: absolute;
			inset-inline-end: 140px;
			bottom: 60px;
			@include rtl {
				transform: rotateY(180deg);
			}
			@media #{$md}{
				inset-inline-end: 30px;
			}
			@media #{$sm}{
				display: none;
			}
		}
		.rs-breadcrumb-bg-thumb{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0px;
			z-index: -1;
			&::before{
				position: absolute;
				content: "";
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background-image: linear-gradient(180deg, #00192C00 -3%, #00192C 133.75%);
			}
		}
		.rs-breadcrumb-title{
			font-size: 56px;
			line-height: 1.12;
			color: var(--rs-white);
			font-weight: 500;
			margin-top: 20px;
			@media #{$md}{
				font-size: 50px;
			}
			@media #{$sm}{
				font-size: 45px;
				line-height: 1.2;
			}
			@media #{$xs}{
				font-size: 40px;
			}
			@media #{$mobile}{
				font-size: 35px;
			}
		}
		.rs-breadcrumb-line {
            width: 482px;
            position: relative;
            display: inline-block;
            margin-top: 25px;
            margin-bottom: 20px;
            border-color: rgba(255, 255, 255, 0.15);
            border-style: solid;
            border-width: 0px 0px 1px 0px;
            @media #{$sm} {
                width: 100%;
            }
            &::after {
                position: absolute;
                content: "";
                width: 145px;
                background: var(--rs-white);
                inset-inline-start: 0;
                height: 2px;
                top: 50%;
                transform: translateY(-50%);
            }
        }
		.rs-breadcrumb-menu{
			ul{
				display: flex;
				align-items: center;
				gap: 8px 8px;
				li{
					list-style: none;
					display: flex;
  					gap: 8px;
					&:last-child{
						color: white;
					}
					a{
						color: rgba(255, 255, 255, 0.7);
						font-weight: 500;
						&:hover{
							color: var(--rs-theme-yellow);
						}
					}
					.rs-breadcrumb-icon{
						svg{
							width: 16px;
							height: 16px;
							@include rtl {
								transform: rotateY(180deg);
							}
							path{
								fill: var(--rs-white);
							}
						}
					}
				}
			}
		}
		.rs-breadcrumb-desc {
			color: rgba(255, 255, 255, 0.9);
			max-width: 600px;
			@media #{$sm}{
				max-width: 100%;
			}
		}
	}
}