@use "../utilities" as *;

/**----------------------------------------
START: Choose CSS
----------------------------------------*/
.h9-choose-box {
	&.customers-box {
		background-color: var(--tj-color-common-white);
		padding: 30px;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.title {
			font-weight: var(--tj-fw-sbold);
			margin-bottom: 20px;
		}
		.rating-area {
			margin-top: 18px;
		}
		.customers-text {
			font-size: 18px;
			line-height: 1.44;
			color: var(--tj-color-text-body);
			font-weight: var(--tj-fw-regular);
			padding-top: 6px;
		}
		@media #{$sm,$xs} {
			padding: 30px 15px;
			min-height: 250px;
		}
	}
	&.choose-box {
		background-color: var(--tj-color-common-white);
		padding: 30px;
		.choose-icon {
			max-width: 90px;
			height: 90px;
			font-size: 64px;
			background-color: var(--tj-color-theme-primary);
			color: var(--tj-color-common-white);
			border-radius: 50%;
			justify-content: center;
			align-items: center;
			margin-top: 5px;
			margin-bottom: 68px;
			i {
				width: 43px;
				@media #{$md,$sm,$xs} {
					width: 35px;
				}
			}
			@media #{$lg} {
				margin-bottom: 45px;
			}
			@media #{$md,$sm,$xs} {
				max-width: 80px;
				height: 80px;
				font-size: 55px;
				margin-top: 0;
				margin-bottom: 30px;
			}
		}
		.title {
			color: var(--tj-color-heading-primary);
			margin-bottom: 18px;
			@media #{$lg,$md} {
				font-size: 20px;
			}
		}
		.desc {
			color: var(--tj-color-text-body);
		}
		.text-btn {
			.btn-text {
				color: var(--tj-color-common-white);
			}
			.btn-icon {
				background-color: var(--tj-color-theme-primary);
			}
		}
		.customers ul li img {
			width: 67px;
			height: 67px;
		}
		@media #{$lg} {
			padding: 30px 20px;
		}
		@media #{$sm,$xs} {
			padding: 30px 15px;
			min-height: 250px;
		}
	}
	&.h9-choose-bg {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		height: 100%;
		position: relative;
		overflow: hidden;
		z-index: 1;
		@media #{$md,$sm} {
			min-height: 360px;
		}
		@media #{$xs} {
			min-height: 308px;
		}
		&::before {
			content: "";
			position: absolute;
			top: 0;
			inset-inline-start: 0;
			width: 100%;
			height: 100%;
			background-color: var(--tj-color-theme-dark);
			opacity: 0.75;
			z-index: -1;
		}
		.desc,
		.title {
			color: var(--tj-color-common-white);
		}
	}
}

/* !END: Choose CSS */