@use "../utilities" as *;

/**----------------------------------------
START: Breadcrumb CSS
----------------------------------------*/
.tj-page {
	&-header {
		padding-top: 133px;
		padding-bottom: 150px;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		background-color: var(--tj-color-theme-dark);
		background-blend-mode: luminosity;
		border-radius: 12px;
		position: relative;
		overflow: hidden;
		z-index: 2;
		@media #{$lg} {
			padding-top: 90px;
			padding-bottom: 100px;
		}
		@media #{$md, $sm, $xs} {
			padding-top: 60px;
			padding-bottom: 70px;
		}
	}
	&-title {
		color: var(--tj-color-common-white);
		line-height: 1;
		margin-bottom: 0;
	}
	&-link {
		margin-top: 32px;
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 8px;
		position: relative;
		border-radius: 50px;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(20px);
		padding: 5px 12px;
		z-index: 2;
		span {
			color: var(--tj-color-common-white);
			font-size: 16px;
			font-weight: var(--tj-fw-medium);
			position: relative;
			display: inline-block;
			line-height: 1;
			i {
				display: inline-flex;
				line-height: 1;
				font-size: 16px;
				color: var(--tj-color-theme-primary);
			}
			&:not(:first-child) {
				i {
					font-size: 18px;
					font-weight: var(--tj-fw-bold);
					color: var(--tj-color-theme-dark-4);
					justify-content: center;
					width: 7px;
					margin-top: 2px;
				}
			}
			a {
				color: var(--tj-color-grey-2);
				&:hover {
					color: var(--tj-color-common-white);
				}
			}
		}
		@media #{$md, $sm, $xs} {
			margin-top: 25px;
		}
	}
}

.page-header-overlay {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.8;
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
/* !END: Breadcrumb CSS */