芝麻web文件管理V1.00

编辑当前文件:/home/digitalh/tricomgroupbd.com/assets/sass/component/_review.scss

/*-------------------------------------------------------
34. Review css
---------------------------------------------------------*/

.review-pic-content {
	position: relative;
	z-index: 1;
	.review-customer {
		position: absolute;
		bottom: 40px;
		right: 40px;
		span {
			position: absolute;
			top: 50%;
			left: 50%;
			translate: -50% -50%;
			display: inline-block;
			color: var(--clr-white);
			text-align: center;
			line-height: 1.2;
			font-size: 15px;
			b {
				font-size: 2.2rem;
				margin-bottom: 3px;
				display: block;
			}
		}
	}
}

.big-car {
	position: absolute;
	z-index: -1;
	bottom: 0;
	right: 0;
}

.review-single {
	padding: 3.5rem;
	background-color: var(--clr-white);
	box-shadow: 0 2px 35px rgba(0,0,0,.15);
	margin-bottom: 3rem;
	&:last-child {
		margin-bottom: 0;
	}
	.review-pic-content {
		display: flex;
		align-items: center;
		gap: 2rem;
		margin-bottom: 30px;
		.review-pic-pic {
			position: relative;
			z-index: 1;
			i {
				height: 26px;
				width: 26px;
				line-height: 26px;
				text-align: center;
				background-color: var(--clr-def);
				-webkit-border-radius: 50%;
				border-radius: 50%;
				color: var(--clr-white);
				position: absolute;
				bottom: 0;
				right: 0;
				font-size: 1.4rem;
			}
		}
		.review-bio {
			h4 {
				text-transform: capitalize;
				margin-bottom: 10px;
				line-height: 1;
			}
			span {
				line-height: 1;
				display: block;
			}
		}
	}
	.review-desc {
		.review-star {
			display: flex;
			align-items: center;
			gap: 3px;
			font-size: 1.4rem;
			color: var(--clr-def);
			margin-bottom: 30px;
		}
		p {
			position: relative;
			z-index: 1;
			padding-left: 2rem;
			&::before {
				@include pos-abs(var(--clr-def),100%,1px,1);
				top: 0;
				left: 0;
			}
		}
	}
}

.testi-wpr {
	.swiper {
		width: 100%;
		height: 300px;
		margin-left: auto;
		margin-right: auto;
	}
	.swiper-slide {
		background-size: cover;
		background-position: center;
		img {
			display: block;
			object-fit: cover;
			border-radius: 50%;
			border: 2px solid transparent;
		}
	}
	.testi-sldr-2 {
		height: 80%;
		width: 100%;
	}
	.testi-sldr {
		height: 20%;
		box-sizing: border-box;
		padding: 0 0 8rem 0;
		.swiper-slide {
			width: 25%;
			height: 100%;
			opacity: 1;
		}
		.swiper-slide-thumb-active {
			opacity: 1;
		}
	}
}

.testi-up{
	position: relative;
	z-index: 1;
	&::before {
		position: absolute;
		bottom: 32px;
		left: 0;
		width: 100%;
		content: '';
		background: #767CB4;
		height: 2px;
	}
}

.testi-single {
    margin-top: 3rem;
    padding: 0 10rem;
    text-align: center;
	p {
		font-size: 2.6rem;
		line-height: 1.7;
		margin-bottom: 3rem;
	}
	.testi-star-bio {
		.testi-bio {
			margin-top: 1.2em;
			h4 {
				margin-bottom: 8px;
				line-height: 1.1;
				text-transform: capitalize;
			}
			span {
				display: inline-block;
				font-size: 1.5rem;
			}
		}
	}
}

.train-shape {
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
}

.testi-star {
	display: flex;
	align-items: center;
	font-size: 1.4rem;
	color: var(--clr-def);
	justify-content: center;
	line-height: 1;
}

.swiper-slide {
	&.swiper-slide-thumb-active {
		img {
			border: 2px solid var(--clr-def);
		}
		&::before {
			position: absolute;
			content: '';
			bottom: -80px;
			left: 35%;
			background-image: url(img/icon/testi-arrow.png);
			height: 3.4rem;
			width: 6rem;
			transform: translate(-50%, 0);
		}
		&::after {
			position: absolute;
			content: '';
			bottom: -48px;
			left: 35%;
			background-color: var(--clr-bg-3);
			height: 2px;
			width: 37px;
			transform: translate(-50%, 0);
		}
	}
}

.review-sldr{
	&.swiper {
		.swiper-pagination {
			position: inherit;
			margin-bottom: -18px;
			margin-top: 40px;
			.swiper-pagination-bullet{
				background: transparent;
				height: 20px;
				width: 20px;
				border: 1px solid var(--clr-def);
				position: relative;
				z-index: 1;
				opacity: 1;
				&.swiper-pagination-bullet-active {
					border-color: var(--clr-def);
					&::after {
						position: absolute;
						left: 50%;
						top: 50%;
						content: "";
						height: 5px;
						width: 5px;
						border-radius: 50%;
						transform: translate(-50%, -50%);
						background: var(--clr-def);
						transition: all 0.35s ease-in-out;
					}
				}
			}
		}
	}  
}

Page is not found

404 image

Oops! Page not found.

Sorry, an error has occured, Requested page not found!

Back To Homepage

leaf image

leaf image