HOME

// ------------------------------------------------------------------------------------------------
// WELCOME
// ------------------------------------------------------------------------------------------------

@if $page-welcome {

	.xts-welcome-page {
		max-width: var(--xts-content-width);
	}

	.xts-welcome-box {
		overflow: hidden;
		// margin-bottom: 20px;
		background-color: #7CB32C;

		img {
			position: absolute;
			top: 0;
			inset-inline-end: 0;
			bottom: 0;
			z-index: -1;
			height: 100%;
			object-fit: cover;
		}

		// h3,
		// p {
		// 	max-width: 60%;
		// }

		h3 {
			font-size: 28px;
		}

		p {
			font-size: 120%;
		}

		.xts-box-content {
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			justify-content: center;
			min-height: 215px;
		}
	}

	:is(
	.xts-welcome-box,
	.xts-white-label-box) {

		h3 {
			font-size: 28px;
		}

		p {
			font-size: 120%;
		}
	}

	.xts-white-label-box {

		.xts-about-text {
			font-size: 120%;
			line-height: 1.5;
		}
	}

	.xts-info-boxes {

		h4 {
			margin-bottom: 10px;
			color: var(--xts-primary-color);
			font-size: 20px;
		}

		p {
			font-size: 120%;
		}

		&.xts-support,
		&.xts-rate {

			p {
				margin-bottom: 10px;
			}
		}
	}

	// .xts-guide-tour-icon {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	width: 35px;
	// 	height: 35px;
	// 	min-width: 35px;
	// 	border: 2px solid var(--xts-primary-color);
	// 	border-radius: 50%;
	// 	font-size: 16px;
	// 	color: var(--xts-primary-color);
	// }

	.xts-info-box-img {

		img {
			max-width: 128px;
		}
	}

	.xts-guide {
		height: 100%;
	}

	.xts-guide-heading {
		align-items: center;
		margin-bottom: 10px;

		img {
			max-height: 70px;
		}
	}

	.xts-guide-tours {
		// background-color: #F9F9F9;
		border-radius: var(--xts-brd-radius);
		counter-reset: item;
		border-top: 1px solid var(--xts-option-border-color);
		margin-inline: -20px;
	}

	.xts-guide-tour {
		display: flex;
		align-items: center;
		padding: 20px;
		gap: 18px;
		counter-increment: item;

		&.xts-done {

			&:before {
				content: "\f15e";
				font-family: 'dashicons';
				background-color: var(--xts-primary-color);
				color: #FFF;
				font-size: 26px;
			}

			h5,
			p {
				opacity: .5;
			}
		}

		.xts-btn-inline {
			white-space: nowrap;
		}

		&:before {
			content: counter(item);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 35px;
			height: 35px;
			min-width: 35px;
			border: 1px solid var(--xts-primary-color);
			border-radius: 50%;
			font-size: 16px;
			color: var(--xts-primary-color);
		}

		&:last-child {
			padding-bottom: 0;
		}

		&:not(:last-child) {
			border-bottom: 1px solid var(--xts-option-border-color);
		}
	}

	.xts-guide-tour-title {
		flex-grow: 1;

		h5 {
			font-size: 15px;
			// color: var(--xts-primary-color);
			color: #333;
			margin-block: 0 5px;
		}

		p {
			font-size: 14px;
		}
	}

} // END IF

// ------------------------------------------------------------------------------------------------
// RESPONSIVE
// ------------------------------------------------------------------------------------------------

// ------------------------------------------------------------------------------------------------
// 1025 AND DOWN
// ------------------------------------------------------------------------------------------------

@mixin R-MD-UP__pages__xtemos__welcome {

	@if $page-welcome {

		.xts-welcome-box {

			:is(
			h3,
			p) {
				max-width: 62%;
			}
		}

	} // END IF
}

// ------------------------------------------------------------------------------------------------
// 1024 AND DOWN
// ------------------------------------------------------------------------------------------------

@mixin R-MD-DOWN__pages__xtemos__welcome {

	@if $page-welcome {

		.xts-welcome-box {

			.xts-box-content {
				background-color: rgba(#000,.4);
			}
		}

	} // END IF
}